Skip to content

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

Closed
hitpopdimestop wants to merge 3 commits into
superdoc:v1from
hitpopdimestop:fix/3786-toolbar-tooltip-clipping
Closed

fix(super-editor): flip toolbar tooltip below the trigger when it clips the viewport top#3838
hitpopdimestop wants to merge 3 commits into
superdoc:v1from
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 →

@caio-pizzol

Copy link
Copy Markdown
Contributor

Thanks for the contribution, @hitpopdimestop! I confirmed the issue, but this PR targets v1 and we’re focusing development on v2.

The same issue still exists in v2, so we’d be happy to review an updated PR against main. I’m going to close this one for now. Thanks again!

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

2 participants