Merge tooltip padding settings (#8493)

diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md
index f2664b42055c4db1dec931a630b89233767df577..a4b1a67da653c07c47c058d10295004bbd4df652 100644 (file)
--- a/docs/docs/configuration/tooltip.md
+++ b/docs/docs/configuration/tooltip.md
@@ -31,8 +31,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
 | `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
 | `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
 | `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer.
-| `xPadding` | `number` | `6` | Padding to add on left and right of tooltip.
-| `yPadding` | `number` | `6` | Padding to add on top and bottom of tooltip.
+| `padding` | | `6` | Padding inside the tooltip on the 4 sides
 | `caretPadding` | `number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
 | `caretSize` | `number` | `5` | Size, in px, of the tooltip arrow.
 | `cornerRadius` | `number` | `6` | Radius of tooltip corner curves.
@@ -320,7 +319,7 @@ var myPieChart = new Chart(ctx, {
                     tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
                     tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
                     tooltipEl.style.font = tooltipModel.bodyFont.string;
-                    tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
+                    tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
                     tooltipEl.style.pointerEvents = 'none';
                 }
             }

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index c96159541d85fb4de279d35b0f9632ae70a4a5f5..332779e9a34817a9fb387ccab5c0da760ff23dec 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -237,6 +237,7 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 * All properties of tooltip model related to the tooltip options have been moved to reside within the `options` property.
 * The callbacks no longer are given a `data` parameter. The tooltip item parameter contains the chart and dataset instead
 * The tooltip item's `index` parameter was renamed to `dataIndex` and `value` was renamed to `formattedValue`
+* The `xPadding` and `yPadding` options were merged into a single `padding` object
 
 ## Developer migration
 

diff --git a/samples/tooltips/border.html b/samples/tooltips/border.html
index 764852f561e38cd7dfa90a64468920a646fc4df1..004366e02c540a916e00aebb44cfc790fd618d25 100644 (file)
--- a/samples/tooltips/border.html
+++ b/samples/tooltips/border.html
@@ -54,8 +54,7 @@
                                                        position: 'nearest',
                                                        mode: 'index',
                                                        intersect: false,
-                                                       yPadding: 10,
-                                                       xPadding: 10,
+                                                       padding: 10,
                                                        caretSize: 8,
                                                        backgroundColor: 'rgba(72, 241, 12, 1)',
                                                        titleFont: {

diff --git a/samples/tooltips/custom-line.html b/samples/tooltips/custom-line.html
index 1d14d2e14b005776e3baca669553a0936e50ab3a..a5c78e525ed18376fb0e77b4cfd3165a42015c2b 100644 (file)
--- a/samples/tooltips/custom-line.html
+++ b/samples/tooltips/custom-line.html
@@ -111,7 +111,7 @@
                        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
                        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
                        tooltipEl.style.font = tooltip.options.bodyFont.string;
-                       tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+                       tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + 'px';
                };
 
                var lineChartData = {

diff --git a/samples/tooltips/custom-pie.html b/samples/tooltips/custom-pie.html
index 738217329ec89dfaf1f4ad038b6ad3b0fc3eecba..8a67255c1a4363166103118241af4145b11be3a4 100644 (file)
--- a/samples/tooltips/custom-pie.html
+++ b/samples/tooltips/custom-pie.html
@@ -111,7 +111,7 @@
                        tooltipEl.style.left = positionX + tooltip.caretX + 'px';
                        tooltipEl.style.top = positionY + tooltip.caretY + 'px';
                        tooltipEl.style.font = tooltip.options.bodyFont.string;
-                       tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
+                       tooltipEl.style.padding = tooltip.padding + 'px ' + tooltip.padding + 'px';
                };
 
                var config = {

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 1bc89d95cde446d74c0efe5ee4dd90324fff3098..1f7076257ffdb35afb44638e184bddaa2019f1a0 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -1,6 +1,7 @@
 import Animations from '../core/core.animations';
 import Element from '../core/core.element';
 import {each, noop, isNullOrUndef, isArray, _elementsEqual} from '../helpers/helpers.core';
+import {toPadding} from '../helpers/helpers.options';
 import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl';
 import {distanceBetweenPoints} from '../helpers/helpers.math';
 import {drawPoint, toFontString} from '../helpers';
@@ -143,7 +144,8 @@ function getTooltipSize(tooltip) {
   const footerLineCount = footer.length;
   const bodyLineItemCount = body.length;
 
-  let height = options.yPadding * 2; // Tooltip Padding
+  const padding = toPadding(options.padding);
+  let height = padding.height;
   let width = 0;
 
   // Count of all lines in the body
@@ -201,7 +203,7 @@ function getTooltipSize(tooltip) {
   ctx.restore();
 
   // Add padding
-  width += 2 * options.xPadding;
+  width += 2 * padding.width;
 
   return {width, height};
 }
@@ -322,11 +324,13 @@ function getBackgroundPoint(options, size, alignment, chart) {
 
 function getAlignedX(tooltip, align) {
   const options = tooltip.options;
+  const padding = toPadding(options.padding);
+
   return align === 'center'
     ? tooltip.x + tooltip.width / 2
     : align === 'right'
-      ? tooltip.x + tooltip.width - options.xPadding
-      : tooltip.x + options.xPadding;
+      ? tooltip.x + tooltip.width - padding.right
+      : tooltip.x + padding.left;
 }
 
 /**
@@ -887,6 +891,8 @@ export class Tooltip extends Element {
     // IE11/Edge does not like very small opacities, so snap to 0
     opacity = Math.abs(opacity) < 1e-3 ? 0 : opacity;
 
+    const padding = toPadding(options.padding);
+
     // Truthy/falsey value for empty tooltip
     const hasTooltipContent = me.title.length || me.beforeBody.length || me.body.length || me.afterBody.length || me.footer.length;
 
@@ -899,7 +905,7 @@ export class Tooltip extends Element {
 
       overrideTextDirection(ctx, options.textDirection);
 
-      pt.y += options.yPadding;
+      pt.y += padding.top;
 
       // Titles
       me.drawTitle(pt, ctx);
@@ -1096,8 +1102,7 @@ export default {
       style: 'bold',
     },
     footerAlign: 'left',
-    yPadding: 6,
-    xPadding: 6,
+    padding: 6,
     caretPadding: 2,
     caretSize: 5,
     cornerRadius: 6,

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index c0fa90a1c365a97217c0913aa09d89e4d7695b46..9a7291d6216f751342250d305f1a774359c550bc 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -55,6 +55,12 @@ describe('Plugin.Tooltip', function() {
             tooltip: {
               mode: 'index',
               intersect: false,
+              padding: {
+                left: 6,
+                top: 6,
+                right: 6,
+                bottom: 6
+              }
             }
           },
           hover: {
@@ -74,8 +80,12 @@ describe('Plugin.Tooltip', function() {
 
       await jasmine.triggerMouseEvent(chart, 'mousemove', {x: point.x, y: chart.chartArea.top + 10});
 
-      expect(tooltip.options.xPadding).toEqual(6);
-      expect(tooltip.options.yPadding).toEqual(6);
+      expect(tooltip.options.padding).toEqualOptions({
+        left: 6,
+        top: 6,
+        right: 6,
+        bottom: 6,
+      });
       expect(tooltip.xAlign).toEqual('left');
       expect(tooltip.yAlign).toEqual('center');
       expect(tooltip.options.bodyColor).toEqual('#fff');
@@ -234,8 +244,7 @@ describe('Plugin.Tooltip', function() {
     var tooltip = chart.tooltip;
     var defaults = Chart.defaults;
 
-    expect(tooltip.options.xPadding).toEqual(6);
-    expect(tooltip.options.yPadding).toEqual(6);
+    expect(tooltip.options.padding).toEqual(6);
     expect(tooltip.xAlign).toEqual('left');
     expect(tooltip.yAlign).toEqual('center');
 
@@ -384,8 +393,7 @@ describe('Plugin.Tooltip', function() {
     var tooltip = chart.tooltip;
     var defaults = Chart.defaults;
 
-    expect(tooltip.options.xPadding).toEqual(6);
-    expect(tooltip.options.yPadding).toEqual(6);
+    expect(tooltip.options.padding).toEqual(6);
     expect(tooltip.xAlign).toEqual('left');
     expect(tooltip.yAlign).toEqual('center');
 
@@ -1178,8 +1186,7 @@ describe('Plugin.Tooltip', function() {
     var tooltip = chart.tooltip;
     var defaults = Chart.defaults;
 
-    expect(tooltip.options.xPadding).toEqual(6);
-    expect(tooltip.options.yPadding).toEqual(6);
+    expect(tooltip.options.padding).toEqual(6);
     expect(tooltip.xAlign).toEqual('center');
     expect(tooltip.yAlign).toEqual('top');
 
@@ -1270,8 +1277,7 @@ describe('Plugin.Tooltip', function() {
         options: {
           enabled: true,
 
-          xPadding: 5,
-          yPadding: 5,
+          padding: 5,
 
           // Body
           bodyFont: {

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index a2933237cb3e2077569521aea4b1877b19db6e44..1f1e762193a532db1ccd55363a98246d5dc8a111 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2418,15 +2418,10 @@ export interface TooltipOptions<TParsedData> extends CoreInteractionOptions {
         */
        footerAlign: TextAlign;
        /**
-        * Padding to add on left and right of tooltip.
+        * Padding to add to the tooltip
         * @default 6
         */
-       xPadding: number;
-       /**
-        * Padding to add on top and bottom of tooltip.
-        * @default 6
-        */
-       yPadding: number;
+       padding: number | ChartArea;
        /**
         *      Extra distance to move the end of the tooltip arrow away from the tooltip point.
         * @default 2