mirror of
https://github.com/chartjs/Chart.js.git
synced 2026-03-14 12:16:52 +01:00
Pass context parameter to custom tooltip (#7579)
This commit is contained in:
committed by
Evert Timberg
parent
0cd445f724
commit
fd2000c018
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user