Pass context parameter to custom tooltip (#7579)

This commit is contained in:
Ben McCann
2020-07-06 06:34:06 -07:00
committed by Evert Timberg
parent 0cd445f724
commit fd2000c018
3 changed files with 5 additions and 3 deletions

View File

@@ -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;

View File

@@ -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

View File

@@ -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});
}
}