Skip to content

[2.x] fix(tooltip): add container prop and fix notification button tooltip …#4375

Merged
imorland merged 2 commits into
2.xfrom
im/fix-tooltip-container-position
Feb 21, 2026
Merged

[2.x] fix(tooltip): add container prop and fix notification button tooltip …#4375
imorland merged 2 commits into
2.xfrom
im/fix-tooltip-container-position

Conversation

@imorland

Copy link
Copy Markdown
Member

…positioning

The Bootstrap tooltip container option was not exposed by the Tooltip component, so tooltips on elements inside overflow-clipped containers (like the notification dropdown) were positioned incorrectly. At certain screen resolutions this caused the tooltip to appear over the cursor, triggering a mousein/mouseout flicker loop that made the button hard to click.

Add a container prop to TooltipAttrs and pass it through to the Bootstrap tooltip initialisation. Update NotificationList to use container="body", which appends the tooltip to the document body so Bootstrap can position it correctly relative to the viewport regardless of any ancestor overflow constraints. Also removes the now-redundant data-container attributes from the Button elements, which were never read by the tooltip system.

Fixes: #4353

**Fixes #4353 **

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

Necessity

  • Has the problem that is being solved here been clearly explained?
  • If applicable, have various options for solving this problem been considered?
  • For core PRs, does this need to be in core, or could it be in an extension?
  • Are we willing to maintain this for years / potentially forever?

Confirmed

  • Frontend changes: tested on a local Flarum installation.
  • Backend changes: tests are green (run composer test).
  • Core developer confirmed locally this works as intended.
  • Tests have been added, or are not appropriate here.

Required changes:

  • Related documentation PR: (Remove if irrelevant)

…positioning

The Bootstrap tooltip `container` option was not exposed by the Tooltip
component, so tooltips on elements inside overflow-clipped containers
(like the notification dropdown) were positioned incorrectly. At certain
screen resolutions this caused the tooltip to appear over the cursor,
triggering a mousein/mouseout flicker loop that made the button hard to click.

Add a `container` prop to `TooltipAttrs` and pass it through to the
Bootstrap tooltip initialisation. Update `NotificationList` to use
`container="body"`, which appends the tooltip to the document body so
Bootstrap can position it correctly relative to the viewport regardless
of any ancestor overflow constraints. Also removes the now-redundant
`data-container` attributes from the Button elements, which were never
read by the tooltip system.

Fixes: #4353

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@imorland imorland added this to the 2.0.0-beta.7 milestone Feb 21, 2026
@imorland imorland requested a review from a team as a code owner February 21, 2026 12:48
Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@imorland imorland merged commit 312a72e into 2.x Feb 21, 2026
35 checks passed
@imorland imorland deleted the im/fix-tooltip-container-position branch February 21, 2026 13:02
imorland added a commit that referenced this pull request Feb 21, 2026
When `container` is set to `"body"` (or any element other than the
trigger's natural parent), Bootstrap appends the tooltip DOM node
directly to that container element rather than adjacent to the trigger.

When Mithril subsequently removes the trigger element from the DOM
(e.g. closing the notification dropdown), Bootstrap is never informed
and the tooltip DOM node is left stranded in the container — visible
forever, impossible to dismiss.

Without `container`, Bootstrap places the tooltip adjacent to the
trigger element; it is removed as part of normal DOM cleanup and the
issue does not manifest.

The fix adds an `onremove` lifecycle hook that calls `tooltip('destroy')`
on the child DOM node before Mithril removes it. This is identical to
the destroy call already used in `recreateTooltip()` when the tooltip
text changes, so the approach is consistent with the existing pattern.

Fixes the regression introduced by #4375 (adding `container="body"` to
the notification list tooltips to fix positioning inside the
overflow-clipped dropdown).

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
imorland added a commit that referenced this pull request Feb 21, 2026
* fix(tooltip): destroy tooltip instance on component removal

When `container` is set to `"body"` (or any element other than the
trigger's natural parent), Bootstrap appends the tooltip DOM node
directly to that container element rather than adjacent to the trigger.

When Mithril subsequently removes the trigger element from the DOM
(e.g. closing the notification dropdown), Bootstrap is never informed
and the tooltip DOM node is left stranded in the container — visible
forever, impossible to dismiss.

Without `container`, Bootstrap places the tooltip adjacent to the
trigger element; it is removed as part of normal DOM cleanup and the
issue does not manifest.

The fix adds an `onremove` lifecycle hook that calls `tooltip('destroy')`
on the child DOM node before Mithril removes it. This is identical to
the destroy call already used in `recreateTooltip()` when the tooltip
text changes, so the approach is consistent with the existing pattern.

Fixes the regression introduced by #4375 (adding `container="body"` to
the notification list tooltips to fix positioning inside the
overflow-clipped dropdown).

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

* chore: add tooltip onremove fix to beta.7 changelog

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

---------

Co-authored-by: Claude Sonnet 4.6 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[2.x] Buttons with tooltip are hard to click in specific corner condition

1 participant