Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

rename tooltip.custom property to tooltip.external #8523

Merged
merged 3 commits into from
Feb 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/docs/configuration/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `enabled` | `boolean` | `true` | Are on-canvas tooltips enabled?
| `custom` | `function` | `null` | See [custom tooltip](#external-custom-tooltips) section.
| `external` | `function` | `null` | See [external tooltip](#external-custom-tooltips) section.
| `mode` | `string` | | Sets which elements appear in the tooltip. [more...](interactions/modes.md#interaction-modes).
| `intersect` | `boolean` | | If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
| `position` | `string` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes)
Expand Down Expand Up @@ -61,13 +61,13 @@ Example:
```javascript
/**
* Custom positioner
* @function Tooltip.positioners.custom
* @function Tooltip.positioners.myCustomPositioner
* @param elements {Chart.Element[]} the tooltip elements
* @param eventPosition {Point} the position of the event in canvas coordinates
* @returns {Point} the tooltip position
*/
const tooltipPlugin = Chart.registry.getPlugin('tooltip');
tooltipPlugin.positioners.custom = function(elements, eventPosition) {
tooltipPlugin.positioners.myCustomPositioner = function(elements, eventPosition) {
/** @type {Tooltip} */
var tooltip = this;

Expand Down Expand Up @@ -242,7 +242,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 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:
External 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 `external` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable external tooltips in the global or chart configuration like so:

```javascript
var myPieChart = new Chart(ctx, {
Expand All @@ -254,7 +254,7 @@ var myPieChart = new Chart(ctx, {
// Disable the on-canvas tooltip
enabled: false,

custom: function(context) {
external: function(context) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');

Expand Down Expand Up @@ -328,7 +328,7 @@ var myPieChart = new Chart(ctx, {
});
```

See [samples](https://www.chartjs.org/samples/) for examples on how to get started with custom tooltips.
See [samples](https://www.chartjs.org/samples/) for examples on how to get started with external tooltips.

## Tooltip Model

Expand Down
1 change: 1 addition & 0 deletions docs/docs/getting-started/v3-migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ A number of changes were made to the configuration options passed to the `Chart`
* `TimeScale` does not read `t` from object data by default anymore. The default property is `x` or `y`, depending on the orientation. See [data structures](../general/data-structures.md) for details on how to change the default.
* `tooltips` namespace was renamed to `tooltip` to match the plugin name
* `legend`, `title` and `tooltip` namespaces were moved from `options` to `options.plugins`.
* `tooltips.custom` was renamed to `plugins.tooltip.external`

#### Defaults

Expand Down
8 changes: 4 additions & 4 deletions samples/tooltips/custom-line.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>

<head>
<title>Line Chart with Custom Tooltips</title>
<title>Line Chart with external Tooltips</title>
<script src="../../dist/chart.min.js"></script>
<script src="../utils.js"></script>
<style>
Expand Down Expand Up @@ -53,7 +53,7 @@
return tooltipEl;
};

var customTooltips = function(context) {
var externalTooltips = function(context) {
// Tooltip Element
var chart = context.chart;
var tooltipEl = getOrCreateTooltip(chart);
Expand Down Expand Up @@ -156,14 +156,14 @@
plugins: {
title: {
display: true,
text: 'Chart.js Line Chart - Custom Tooltips'
text: 'Chart.js Line Chart - External Tooltips'
},
tooltip: {
enabled: false,
mode: 'index',
intersect: false,
position: 'nearest',
custom: customTooltips
external: externalTooltips
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion samples/tooltips/custom-pie.html
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
return tooltipEl;
};

Chart.defaults.plugins.tooltip.custom = function(context) {
Chart.defaults.plugins.tooltip.external = function(context) {
// Tooltip Element
var tooltip = context.tooltip;
var tooltipEl = getOrCreateTooltip(context.chart);
Expand Down
6 changes: 3 additions & 3 deletions samples/tooltips/custom-points.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<div class="chartjs-tooltip" id="tooltip-1"></div>
</div>
<script>
var customTooltips = function(context) {
var externalTooltips = function(context) {
var chart = context.chart;
$(chart.canvas).css('cursor', 'pointer');

Expand Down Expand Up @@ -115,13 +115,13 @@
plugins: {
title: {
display: true,
text: 'Chart.js - Custom Tooltips using Data Points'
text: 'Chart.js - External Tooltips using Data Points'
},
tooltip: {
enabled: false,
mode: 'index',
intersect: false,
custom: customTooltips
external: externalTooltips
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/plugins/plugin.tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -548,8 +548,8 @@ export class Tooltip extends Element {
me._resolveAnimations().update(me, properties);
}

if (changed && options.custom) {
options.custom.call(me, {chart: me._chart, tooltip: me});
if (changed && options.external) {
options.external.call(me, {chart: me._chart, tooltip: me});
}
}

Expand Down Expand Up @@ -994,7 +994,7 @@ export class Tooltip extends Element {
if (changed) {
me._active = active;

if (options.enabled || options.custom) {
if (options.enabled || options.external) {
me._eventPosition = {
x: e.x,
y: e.y
Expand Down Expand Up @@ -1080,7 +1080,7 @@ export default {

defaults: {
enabled: true,
custom: null,
external: null,
position: 'average',
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: '#fff',
Expand Down Expand Up @@ -1207,7 +1207,7 @@ export default {
},

descriptors: {
_scriptable: (name) => name !== 'filter' && name !== 'itemSort' && name !== 'custom',
_scriptable: (name) => name !== 'filter' && name !== 'itemSort' && name !== 'external',
_indexable: false,
callbacks: {
_scriptable: false,
Expand Down