Skip to content

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

Open
almahmudsarker wants to merge 1 commit intochartjs:masterfrom
almahmudsarker:feature/tooltip-persist-hover
Open

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

Conversation

@almahmudsarker
Copy link
Copy Markdown

Description

Fixes #12080

Currently, moving the cursor from a data point into the tooltip causes the tooltip to disappear immediately, because the tooltip area is not part of the chart's interaction region. This is especially problematic on scatter plots where the data point is small and the user wants to read the tooltip content.

Solution

Added a new tooltip.persistOnHover option (default: false). When enabled, if the cursor leaves a data point but enters the tooltip's bounding box, the tooltip stays visible. It hides normally once the cursor leaves the tooltip area entirely.

Changes

  • src/plugins/plugin.tooltip.js — added _isMouseOverTooltip() helper and a guard in _getActiveElements() that returns the previous active elements when the cursor is over the tooltip bounding box
  • src/types/index.d.ts — added persistOnHover: boolean to TooltipOptions

Usage

options: {
  plugins: {
    tooltip: {
      persistOnHover: true
    }
  }
}

… 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