Skip to content

fix(css): keep tooltip width with max-content beside dialog edges - #43249

Open
ump45nose wants to merge 2 commits into
twbs:mainfrom
ump45nose:fix-tooltip-dialog-flip-width
Open

ump45nose wants to merge 2 commits into
twbs:mainfrom
ump45nose:fix-tooltip-dialog-flip-width

Conversation

@ump45nose

Copy link
Copy Markdown
Contributor

Description

Fixes #43228.

.tooltip is positioned with left/top only and had no width of its own (the 200px cap lives on .tooltip-inner). Inside a containing block with little room left—most commonly an open <dialog>—the tooltip shrinks to the gap between its left and the edge. Each Floating UI flip attempt then changes that size, autoUpdate re-runs, and placement never settles (it looks like two half-transparent tooltips).

Set width: max-content on .tooltip, matching Floating UI’s initial-layout guidance and the workaround noted in the issue. .tooltip-inner still enforces --tooltip-max-width.

Motivation & Context

Confirmed v6 bug: tooltip beside a dialog edge flips forever.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed (npm run css-compile, npm run css-lint)

Live previews

Related issues

Fixes #43228

Notes

AI-assisted change. Source-only SCSS edit; CI rebuilds dist/.

When a tooltip is left/top-positioned inside a containing block with
limited remaining space (e.g. an open dialog), shrinking to the gap
between left and the edge makes flip/autoUpdate thrash. Set
width: max-content on .tooltip per Floating UI's initial-layout guidance.

Fixes twbs#43228
@ump45nose
ump45nose requested a review from a team as a code owner October 31, 2026 07:25
@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented css Sass sources or compiled CSS labels Oct 31, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented css Sass sources or compiled CSS v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

v6: Tooltip placement flips forever beside a dialog’s edge

2 participants