Skip to content

fix(super-editor): flip toolbar tooltip below the trigger when it clips the viewport top#3838

Open
hitpopdimestop wants to merge 3 commits into
superdoc-dev:mainfrom
hitpopdimestop:fix/3786-toolbar-tooltip-clipping
Open

fix(super-editor): flip toolbar tooltip below the trigger when it clips the viewport top#3838
hitpopdimestop wants to merge 3 commits into
superdoc-dev:mainfrom
hitpopdimestop:fix/3786-toolbar-tooltip-clipping

Conversation

@hitpopdimestop

@hitpopdimestop hitpopdimestop commented Jul 21, 2026

Copy link
Copy Markdown

What & why

Toolbar tooltips were clipped when the toolbar sits flush with the window top. The tooltip was always placed above the trigger, so triggerRect.top - contentHeight - 10 went negative and rendered above the viewport edge (issue #3786).

It now:

  • flips below the trigger (arrow pointing up, transition origin adjusted) when there is no room above, and
  • clamps horizontally to document.documentElement.clientWidth, which excludes the window scrollbar.

Screenshots

Before — the "Insert table" tooltip is clipped at the window top:
Знімок екрана 2026-07-21 о 14 59 10

After — the tooltip flips below the button:
Знімок екрана 2026-07-21 о 14 59 22

Test plan

  • SdTooltip.test.js: flip-below, stay-above, a realistic-height flip (proves the tooltip's height is used, not just when the trigger touches the top), and a clientWidth < innerWidth horizontal-clamp test.
  • Toolbar test suite passing; Prettier clean.

Closes #3786

…he viewport top

Tooltips were always positioned above the trigger, so buttons in a toolbar
flush with the window top rendered tooltips off-screen (negative top). Flip
the tooltip below the trigger (with the arrow pointing up) when there is no
room above.

Fixes superdoc-dev#3786
…idth

Use document.documentElement.clientWidth instead of window.innerWidth so a
tooltip near the right edge does not clamp under a window scrollbar.
@hitpopdimestop
hitpopdimestop requested a review from a team as a code owner July 21, 2026 12:43
@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Toolbar tooltips are cut off by edge of the window

1 participant