Skip to content

feat: add persistOnHover option to keep tooltip visible when hovering over it#12255

Open
almahmudsarker wants to merge 1 commit into
chartjs:masterfrom
BrunoDuvane40:feature/tooltip-persist-hover
Open

feat: add persistOnHover option to keep tooltip visible when hovering over it#12255
almahmudsarker wants to merge 1 commit into
chartjs:masterfrom
BrunoDuvane40:feature/tooltip-persist-hover

Conversation

@almahmudsarker
Copy link
Copy Markdown

Summary

This PR addresses issue #12080 by adding a persistOnHover option to the tooltip plugin.

The contribution focuses on a behavior improvement: when tooltip.persistOnHover is set
to true, the tooltip remains visible as the cursor moves from the data point into the
tooltip bounding box, instead of disappearing immediately.

Changes Made

  • Added _isMouseOverTooltip(e) method to src/plugins/plugin.tooltip.js
  • Extended _getActiveElements() in src/plugins/plugin.tooltip.js to retain active
    elements while the cursor is inside the tooltip bounding box
  • Added persistOnHover: false to the tooltip defaults in src/plugins/plugin.tooltip.js
  • Added persistOnHover: boolean to TooltipOptions in src/types/index.d.ts

Implementation Notes

The solution was implemented by intercepting the result of _getActiveElements() after
the normal interaction lookup returns empty. The tooltip's bounding box (x, y,
width, height) is already set from the previous render, so we check whether the
cursor is inside it and return the previous active elements if so.

Alternative approaches considered:

  • Custom point+tooltip interaction mode — rejected because it would require calculating
    tooltip bounds during hit testing (before rendering), creating a circular dependency.

The guard approach was chosen because it requires no changes to interaction modes or
controllers, has zero cost when the option is false (the default), and is fully
self-contained inside the tooltip plugin.

Testing / Verification

  • Ran pnpm run build — no errors
  • Verified manually at http://localhost:8081/docs/master/samples/tooltip/interactions.html
  • With persistOnHover: true: moving cursor from data point into tooltip keeps it visible
  • Moving cursor outside tooltip hides it normally
  • Confirmed no console/runtime errors
  • Existing tooltip behavior unaffected when option is omitted

Related Issue

Closes #12080

… tooltip.persistOnHover is true, the tooltip remains visible as the cursor moves from the data point into the tooltip bounding box. Closes chartjs#12080
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow the tooltip to remain open on hover

1 participant