fix(Tooltip): render above the overlay tier so tooltips aren't occluded - #1153
Conversation
|
Tooltip content had no z-index, while Dropdown, Menu, ContextMenu and DatePicker set `z-index: 1`. A tooltip whose trigger sits inside one of those overlays (e.g. an EllipsisContent in a Dropdown) therefore rendered behind it. Give tooltip content `z-index: 2` so it sits above that tier. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
8608bf5 to
e93658d
Compare
Storybook Preview Deployed✅ Preview URL: https://click-5z103249l-clickhouse.vercel.app Built from commit: |
|
@DreaminDani Please add screenshots / recording for problem illustration; when applicable please include before/after media. 📝 Follow up for the future - we should add a group of z-index tokens to operate semantic values vs absolute/hardcoded ones |
Added :)
I made an internal ticket for this, for now. We can revisit when we're looking at other tokens. |
Problem
Tooltipcontent has noz-index, whileDropdown,Menu,ContextMenuandDatePickerall setz-index: 1. When a tooltip's trigger sits inside one of those overlays, the tooltip portals into the same stacking context with an effectivez-index: auto(0) and renders behind the overlay.This is now easy to hit because
EllipsisContentshows a realTooltipon overflow: anEllipsisContentplaced inside aDropdown(e.g. a truncated label in a menu item) shows its tooltip clipped behind the menu.Fix
Give tooltip content
z-index: 2so it sits just above thez-index: 1overlay tier.Toastremains at the top (2147483647).Verification
Render an
EllipsisContentwith overflowing text inside an openDropdownand hover the trigger — the tooltip now paints above the menu instead of behind it. Existing Tooltip/EllipsisContent stories and visual-regression baselines cover the rendering.