From f7db73baa12198e39861894f202e93b724fb6738 Mon Sep 17 00:00:00 2001 From: almahmudsarker Date: Tue, 28 Apr 2026 00:25:43 +0100 Subject: [PATCH] feat: add persistOnHover option to keep tooltip visible on hover When tooltip.persistOnHover is true, the tooltip remains visible as the cursor moves from the data point into the tooltip bounding box. Closes #12080 --- src/plugins/plugin.tooltip.js | 21 +++++++++++++++++++++ src/types/index.d.ts | 6 ++++++ 2 files changed, 27 insertions(+) diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index b39681ce2ca..356b6e48c9c 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -1203,9 +1203,29 @@ export class Tooltip extends Element { active.reverse(); } + // When persistOnHover is enabled, keep the tooltip visible while the cursor + // is over the tooltip bounding box (even after leaving the data point). + if (options.persistOnHover && !active.length && lastActive.length && this._isMouseOverTooltip(e)) { + return lastActive; + } + return active; } + /** + * Returns true when the event position is inside the tooltip's rendered bounding box. + * @param {ChartEvent} e + * @returns {boolean} + * @private + */ + _isMouseOverTooltip(e) { + const {x, y, width, height, opacity} = this; + if (!opacity || isNullOrUndef(x) || isNullOrUndef(y)) { + return false; + } + return e.x >= x && e.x <= x + width && e.y >= y && e.y <= y + height; + } + /** * Determine if the active elements + event combination changes the * tooltip position @@ -1276,6 +1296,7 @@ export default { enabled: true, external: null, position: 'average', + persistOnHover: false, backgroundColor: 'rgba(0,0,0,0.8)', titleColor: '#fff', titleFont: { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 32831adc88c..b21167517d8 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -2798,6 +2798,12 @@ export interface TooltipOptions extends Cor * @default true */ enabled: Scriptable>; + /** + * Keep the tooltip visible when the cursor moves from the data point into + * the tooltip bounding box. + * @default false + */ + persistOnHover: boolean; /** * See external tooltip section. */