Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
When the navigation toolbar is collapsed, your on a hover supported device and you hover over the "?" icon in the footer area, the 'Help' tooltip that pops up is slightly obstructed.
Steps to reproduce
On a deskto device supporting hover, collapse the toolbar and hover over the Help icon in the footer. Note the tooltip that appears is slightly obstructed by the right border of the navigation toolbar.
| Comment | File | Size | Author |
|---|---|---|---|
| #22 | 3443835-postpatch.mov | 6.25 MB | javi-er |
| #8 | j-r-capture 2024-05-08 a la(s) 4.00.20 p. m..png | 83.19 KB | aronm |
| Monosnap Home | Drush Site-Install 2024-04-26 15-26-05.png | 113.67 KB | m4olivei |
Issue fork drupal-3443835
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
ckrinaComment #3
m4oliveiI fired up an MR thinking this would be easy. I spent a good half hour just finding where that border is defined that is obstructing the tooltip. It's here, for future me or others that come to this issue 😅
https://git.drupalcode.org/project/drupal/blob/11.x/core/modules/navigat...
Comment #4
ckrinaComment #5
aronm commentedI am with @dalin at DrupalCon Portland 2024, and I am going to look at fixing this issue within the next hour.
Comment #6
dalinI'm mentoring @aronm on how to contribute to their first d.o issue.
Comment #8
aronm commentedProblem:
The tooltip itself has a z-index of 801. The border comes from .admin-toolbar::after which is part of admin-toolbar and has a z-index of 501. However, #menu-footer, which is an ancestor of the tooltip has a z-index of -1, which is overriding the 801 z-index of the tooltip.
Changing the z-index of #menu-footer to a higher value caused the element to overlap .admin-toolbar and make the border disappear.
Tried applying a border-inline-end to the #menu-footer, which caused a flicker when the menu expanded.
The arrangement of all the associated elements needs to be refactored to fix this correctly. However, a simpler fix is to change the hardcoded offset position of the tooltip in tooltip.js. Shifted the offset from 6px to 18 px.
Thanks @javi-er and @dalin for assistance with this issue.
Comment #9
finnsky commentedThank you for you work here!
In my point of view we still need to fix z-index and we cannot move tooltip.
I see 2 ways:
1. Manage border on menu level.
2. Backport popover api approach from https://www.drupal.org/project/drupal/issues/3197758 it will be on top layer
https://developer.chrome.com/blog/introducing-popover-api
In any case i don't think it is novice issue anymore.
Comment #10
finnsky commentedComment #13
gauravvvv commentedComment #14
finnsky commentedLooks good. Issue fixed. No regressions. Thank you!
Comment #21
ckrinaCommitted 981989f and pushed to 10.3.x. Thanks!
Comment #22
javi-er commentedWe considered the implemented approach but the problem with this is that when the menu slides to the right it covers the borders for a short amount of time causing some flickering, that's why the original approach used an
:afterpseudoelement imo.It's a tiny issue and not very noticeable, so I'll leave to the maintainer to decide if further action is needed, see attached video.