Skip to content

fix(Tooltip): render above the overlay tier so tooltips aren't occluded - #1153

Merged
DreaminDani merged 1 commit into
mainfrom
fix/tooltip-z-index-above-overlays
Jul 22, 2026
Merged

fix(Tooltip): render above the overlay tier so tooltips aren't occluded#1153
DreaminDani merged 1 commit into
mainfrom
fix/tooltip-z-index-above-overlays

Conversation

@DreaminDani

@DreaminDani DreaminDani commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Problem

Tooltip content has no z-index, while Dropdown, Menu, ContextMenu and DatePicker all set z-index: 1. When a tooltip's trigger sits inside one of those overlays, the tooltip portals into the same stacking context with an effective z-index: auto (0) and renders behind the overlay.

image

This is now easy to hit because EllipsisContent shows a real Tooltip on overflow: an EllipsisContent placed inside a Dropdown (e.g. a truncated label in a menu item) shows its tooltip clipped behind the menu.

Fix

Give tooltip content z-index: 2 so it sits just above the z-index: 1 overlay tier. Toast remains at the top (2147483647).

.content {
  /* Sit above the z-index:1 overlay tier (Dropdown, Menu, ContextMenu, DatePicker)
     so a tooltip triggered from inside one of them isn't occluded by it. */
  z-index: 2;
  ...
}

Verification

Render an EllipsisContent with overflowing text inside an open Dropdown and 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.

@changeset-bot

changeset-bot Bot commented Jul 21, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: e93658d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@DreaminDani
DreaminDani requested a review from XOP July 21, 2026 22:44
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>
@DreaminDani
DreaminDani force-pushed the fix/tooltip-z-index-above-overlays branch from 8608bf5 to e93658d Compare July 21, 2026 22:46
@workflow-authentication-public

Copy link
Copy Markdown
Contributor

Storybook Preview Deployed

✅ Preview URL: https://click-5z103249l-clickhouse.vercel.app

Built from commit: aa88fe733963e74fd78eefdeb0aaf79bcaff8c5d

@XOP

XOP commented Jul 22, 2026

Copy link
Copy Markdown
Collaborator

@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

@DreaminDani

Copy link
Copy Markdown
Contributor Author

@XOP

Please add screenshots

Added :)

Follow up for the future

I made an internal ticket for this, for now. We can revisit when we're looking at other tokens.

@DreaminDani
DreaminDani merged commit 55816be into main Jul 22, 2026
10 of 11 checks passed
@DreaminDani
DreaminDani deleted the fix/tooltip-z-index-above-overlays branch July 22, 2026 14:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants