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

* rename tooltip.custom property to tooltip.external * Implement feedback * missed 1
chartjs · Feb 27, 2021 · 9741942 · 9741942
1 parent 3460ef1
commit 9741942
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,