Merge tooltip padding settings (#8493)

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';
                 }
             }

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
 

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: {

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 = {

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 = {

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,

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: {

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