fix: Ensure tooltips are displayed behind modals #22957
Conversation
|
Thanks for taking the time to open a PR!
|
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
| cy.visitApp() | ||
| }) | ||
|
|
||
| it('should layer beneath modals', () => { |
There was a problem hiding this comment.
Does this make more sense as a CT test? You could mount a modal and render a tooltip inside it to verify behavior.
| // Our modal overlays use a backdrop z-index of 10, but the tooltip lib defaults to 10000 which causes | ||
| // tooltips to overlay modals & modal backdrops. Override to set z-index so that tooltips aren't | ||
| // forced atop items they shouldn't be | ||
| z-index: 9; |
There was a problem hiding this comment.
We have tooltips inside some popovers, which causes the tooltip to not overlay properly. Should this be a prop that gets passed in? We can default to a low z-index and than have an in-modal prop to bump the z-index up. There might be a clever way to detect the context of the tooltip and adjust
There was a problem hiding this comment.
Dang, missed that in Percy.
I started off trying to use z-index: inherit so the tooltip could infer an appropriate layer based on its parent, but that caused issues with other areas since the tooltips are inherently ad-hoc DOM elements attached to body. I'll poke at it some more to see if there's a clever way to address via CSS
|
Took another tack at this. Since |
| @@ -133,6 +134,18 @@ fragment LoginModal on Query { | |||
| } | |||
| ` | |||
|
|
|||
| // Ensure all tooltips are closed when the modal opens - this prevents tooltips from beneath that | |||
| // are stuck open being rendered on top of the modal due to the use of a fixed z-index in `floating-vue` | |||
| watch( | |||
There was a problem hiding this comment.
This is nice, hideAllPoppers is a good find
|
Released in This comment thread has been locked. If you are still experiencing this issue after upgrading to |
User facing changelog
Ensure tooltips for overlaid content do not appear in front of modal dialogs
Additional details
Steps to test
Little bit tricky, but the easiest way to verify this is to get a tooltip to stick open - typically you can throw your mouse around the ACI column headers (Latest Runs & Average Duration) and eventually one will stay open after you've moused off (it'll close if you mouse back over or onto another item with a tooltip).
If you have trouble getting a tooltip to stick open you can try adding
:shown="true"toTooltip.vuearound line 12 which should force at least one tooltip open without any interaction.Once you get a tooltip stuck open, click the "New Spec" button and verify that the tooltip does not overlay the modal or its backdrop.
How has the user experience changed?
Before
After
PR Tasks
cypress-documentation?type definitions?