Opened 6 weeks ago
Last modified 6 weeks ago
#9318 new defect (bug)
TinyMCE toolbar tooltips are mispositioned in scrollable editors
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Core | Keywords: | |
| Cc: |
Description
When hovering toolbar icons such as “Insert/edit image” in the editor,
the tooltip appears far below the toolbar instead of being positioned
near the hovered button.
This issue is reproducible when the editor content or container is scrollable
(e.g. within an iframe or a constrained editor area). It appears that the
tooltip positioning logic does not account for the iframe document scroll
offset, causing the tooltip to be rendered far from the trigger element.
Steps to reproduce:
- Use a vanilla WordPress install with BuddyPress enabled.
- Open an editor that uses TinyMCE (e.g. Messages → Compose).
- Add enough content so the editor area becomes scrollable.
- Hover any toolbar icon (e.g. “Insert/edit image”).
- Observe that the tooltip is displayed far below the toolbar instead of next to the hovered icon.
Expected result:
The tooltip should appear adjacent to the toolbar button being hovered,
regardless of the editor scroll position.
Actual result:
The tooltip is rendered far below the toolbar when the editor is scrolled.
This seems related to positioning logic not accounting for iframe or
scroll container offsets.
This feels similar in nature to positioning issues caused by iframe
scroll offsets, but I wanted to report it separately as it affects
TinyMCE toolbar tooltips rather than mentions autosuggest.