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. */