Skip to:
Content

BuddyPress.org

Opened 6 weeks ago

Last modified 6 weeks ago

#9318 new defect (bug)

TinyMCE toolbar tooltips are mispositioned in scrollable editors

Reported by: manhphucofficial's profile manhphucofficial 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:

  1. Use a vanilla WordPress install with BuddyPress enabled.
  2. Open an editor that uses TinyMCE (e.g. Messages → Compose).
  3. Add enough content so the editor area becomes scrollable.
  4. Hover any toolbar icon (e.g. “Insert/edit image”).
  5. 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.

Attachments (1)

tinymce-tooltip-position-offset.png (62.2 KB) - added by manhphucofficial 6 weeks ago.
Screenshot showing TinyMCE toolbar tooltip rendered far below the hovered button.

Download all attachments as: .zip

Change History (2)

#1 @manhphucofficial
6 weeks ago

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.

@manhphucofficial
6 weeks ago

Screenshot showing TinyMCE toolbar tooltip rendered far below the hovered button.

Note: See TracTickets for help on using tickets.