diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index 07dc6717a0f..9cf24fc7e82 100644 --- a/docs/docs/configuration/tooltip.md +++ b/docs/docs/configuration/tooltip.md @@ -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) @@ -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; @@ -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, { @@ -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'); @@ -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 diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 2cd03da0a8d..57ca63405e1 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -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 diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html index a5c78e525ed..cf34d323d71 100644 --- a/samples/tooltips/custom-line.html +++ b/samples/tooltips/custom-line.html @@ -2,7 +2,7 @@ - Line Chart with Custom Tooltips + Line Chart with external Tooltips