From 6c38c31a0a29a36ec2a4f31cd8cac5aa16b79c86 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Mon, 6 Jul 2020 06:34:06 -0700 Subject: [PATCH] Pass context parameter to custom tooltip (#7579) --- docs/docs/configuration/tooltip.md | 5 +++-- docs/docs/getting-started/v3-migration.md | 1 + src/plugins/plugin.tooltip.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index 5647095bc..3fb37fc6c 100644 --- a/docs/docs/configuration/tooltip.md +++ b/docs/docs/configuration/tooltip.md @@ -194,7 +194,7 @@ The tooltip items passed to the tooltip callbacks implement the following interf ## External (Custom) Tooltips -Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an oncanvas one. You can enable custom tooltips in the global or chart configuration like so: +Custom tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The `custom` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable custom tooltips in the global or chart configuration like so: ```javascript var myPieChart = new Chart(ctx, { @@ -205,7 +205,7 @@ var myPieChart = new Chart(ctx, { // Disable the on-canvas tooltip enabled: false, - custom: function(tooltipModel) { + custom: function(context) { // Tooltip Element var tooltipEl = document.getElementById('chartjs-tooltip'); @@ -218,6 +218,7 @@ var myPieChart = new Chart(ctx, { } // Hide if no tooltip + var tooltipModel = context.tooltip; if (tooltipModel.opacity === 0) { tooltipEl.style.opacity = 0; return; diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index b2be1b28b..73cb4d04f 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -186,6 +186,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now * `xLabel` and `yLabel` were removed. Please use `index` and `value` * The `filter` option will now be passed additional parameters when called and should have the method signature `function(tooltipItem, index, tooltipItems, data)` +* The `custom` callback now takes a context object that has `tooltip` and `chart` properties ## Developer migration diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 93b74bcfa..ffd08be36 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -669,7 +669,7 @@ export class Tooltip extends Element { } if (changed && options.custom) { - options.custom.call(me, [me]); + options.custom.call(me, {chart: me._chart, tooltip: me}); } } -- 2.47.3