rename tooltip.custom property to tooltip.external (#8523)

* rename tooltip.custom property to tooltip.external

* Implement feedback

* missed 1

diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
index 07dc6717a0fdcbb8bbf17a2cf60e47fa7d78fd39..9cf24fc7e82ab16fa0357637e1904a12bcd01f76 100644 (file)
--- 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 2cd03da0a8d23770a15db58030f5b0eea2db4797..57ca63405e16b98bb292517693217b446d31abb7 100644 (file)
--- 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 a5c78e525ed18376fb0e77b4cfd3165a42015c2b..cf34d323d714326df8484342f9609e35331572e2 100644 (file)
--- a/samples/tooltips/custom-line.html
+++ b/samples/tooltips/custom-line.html
@@ -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>
@@ -53,7 +53,7 @@
                        return tooltipEl;
                };
 
-               var customTooltips = function(context) {
+               var externalTooltips = function(context) {
                        // Tooltip Element
                        var chart = context.chart;
                        var tooltipEl = getOrCreateTooltip(chart);
@@ -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
                                                }
                                        }
                                }

diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
index 8a67255c1a4363166103118241af4145b11be3a4..4c3e67bdcf8cb107782ac7de7c7878c21544d437 100644 (file)
--- a/samples/tooltips/custom-pie.html
+++ b/samples/tooltips/custom-pie.html
@@ -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);

diff --git a/samples/tooltips/custom-points.html b/samples/tooltips/custom-points.html
index f0f9b31eb6d5ec8d330b78fe4d9065865d8dcb03..84137087ffabd1bdf7064552642198320572f48e 100644 (file)
--- a/samples/tooltips/custom-points.html
+++ b/samples/tooltips/custom-points.html
@@ -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');
 
@@ -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
                                                }
                                        }
                                }

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 1f7076257ffdb35afb44638e184bddaa2019f1a0..7adcd2604e514a07e3c8bc96d5f3d04332ff4030 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -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});
     }
   }
 
@@ -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
@@ -1080,7 +1080,7 @@ export default {
 
   defaults: {
     enabled: true,
-    custom: null,
+    external: null,
     position: 'average',
     backgroundColor: 'rgba(0,0,0,0.8)',
     titleColor: '#fff',
@@ -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,