Custom tooltips do not appear on top of everything
vpavlovskii opened this issue · 5 comments
Description
Check the corresponding docs section, for instance
Link to Reproduction
https://paste.twilio.design/primitives/tooltip-primitive
Steps to reproduce
- Go to the corresponding docs section
- Hover button from the first example
- See the error
Paste Core Version
latest
Browser
Google Chrome 124.0.6367.93
Operating System
- macOS
- Windows
- Linux
Additional Information
No response
It sounds like the issue with the custom tooltips not appearing on top of everything could be related to the z-index property. The z-index controls the stacking order of elements on a webpage, and if the tooltip's z-index is lower than other elements, it might not display as expected.
In the Paste design system, tooltips are set with a z-index of "zIndex90". If other elements in your application have a higher z-index, they could overlap the tooltip. To address this, you can wrap your tooltip component in a div and assign a higher z-index to this div:
<div style={{ zIndex: 9999 }}>
<Tooltip text="Your tooltip text here">
<Button variant="primary">Hover over me</Button>
</Tooltip>
</div>This manually increases the z-index of the tooltip's container, potentially resolving the display issue. However, be mindful of using high z-index values to avoid conflicts with other overlay components or modals in your application.
Additionally, ensure that tooltips are not used on non-focusable elements, like icons or disabled buttons, as these cannot be focused on by keyboard users, which can affect the tooltip's functionality. Tooltips also require their children to forward refs; if you're wrapping a React component that does not forward refs, the tooltip might not work as expected.
If adjusting the z-index does not resolve the issue, please provide more details about your implementation for further assistance.
Details
Sources
- packages/paste-core/core-bundle/src/tooltip.tsx
- packages/paste-core/components/tooltip/src/Tooltip.tsx
- packages/paste-website/src/pages/components/tooltip/index.mdx
- packages/paste-core/components/tooltip/CHANGELOG.md
- packages/paste-core/primitives/tooltip/CHANGELOG.md
- packages/paste-core/core-bundle/CHANGELOG.md
- packages/paste-core/core-bundle/CHANGELOG_ARCHIVE.md
About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.
Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.
To continue the conversation, mention @dosu.
Hi @vpavlovskii,
Thanks for reporting this issue, I appreciate you taking the time!
The page you referenced is our Primitive Tooltip component, which is an unstyled and accessible basis upon which we build our tooltip. The primitive tooltip is only concerned with API, positioning, and accessibility. In the example you reference, the primitive tooltip is appearing beneath our Sidebar due to having a lower z-index value. You can see in the following image that changing the z-index fixes the issue:
If you're rolling your own Tooltip for any reason, I recommend looking at our Tooltip Component implementation and using the correct z-index token to make sure it is layered correctly.
As a quick follow up, I will make some improvements to that page to demonstrate how one can style the primitive Tooltip.
The website now includes the fix.
Example for Dark theme displayed now as follows
