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?
