BUG - Polaris Tooltip cannot be displayed in AppBridge Modal

Retired Boards Appdev Tools
,
1

My app offers two different views of a particular component, one “inline” mode which is displayed in a Polaris Card, and a fullscreen mode which is displayed in an AppBridge Modal.

Relevant documentation:

https://polaris.shopify.com/components/overlays/tooltip

https://shopify.dev/docs/api/app-bridge-library/react-components/modal

The display for this component is conditional based on a boolean variable called fullScreen, with the following code:

{
    fullScreen 
    ?   <Modal
            variant="max"
            open={true}
            onHide={() => setFullScreen(!fullScreen)}>
            <Box padding="400" minHeight="100vh" background="bg-surface-brand">
                <ManageSteps 
                    steps={steps}
                    handleAdd={handleAddStep}
                    handleDelete={handleDeleteStep}
                />
            </Box>
        </Modal>
    :   <Card background="bg-surface-brand">
            <ManageSteps 
                steps={steps}
                handleAdd={handleAddStep}
                handleDelete={handleDeleteStep}
            />
        </Card>
}

The ManageSteps component which is displayed in either mode uses a Tooltip on a Select component which is only rendered under certain circumstances:

if (!canExtend(step)) {
    return (
        <Box maxWidth="164px">
            <Tooltip content="Step limit reached.">
                <Select
                    label={''}
                    labelHidden={true}
                    options={[
                        { label: 'Thank You', value: '' }
                    ]}
                />
            </Tooltip>
        </Box>
    );
}

This Tooltip message displays as expected in the “inline” view which is displayed in the Card component, however the Tooltip is not visible when in fullscreen mode/inside the Modal. After much experimentation I can’t seem to get a Tooltip to work inside a modal at all, under any circumstances.

The Tooltip component does offer a zIndexOverride attribute, but even when setting this to the maximum possible value the Tooltip is still not visible, presumably because it is still behind/underneath the Modal.

Is there any way to get a Tooltip to display in an AppBridge Modal?

2

When using Polaris components built with React Portals, like Popover, Tooltip, and Combobox in a modal, you must wrap your modal’s child components in a Polaris App Provider.

https://shopify.dev/docs/api/app-bridge/using-modals-in-your-app#react-components-using-react-portals