From 8c4e862a2cdc5a37dd11817e551e4985f1a77592 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Mon, 22 Feb 2021 01:30:25 -0500 Subject: [PATCH] Merge tooltip padding settings (#8493) --- docs/docs/configuration/tooltip.md | 5 ++--- docs/docs/getting-started/v3-migration.md | 1 + samples/tooltips/border.html | 3 +-- samples/tooltips/custom-line.html | 2 +- samples/tooltips/custom-pie.html | 2 +- src/plugins/plugin.tooltip.js | 19 +++++++++++------ test/specs/plugin.tooltip.tests.js | 26 ++++++++++++++--------- types/index.esm.d.ts | 9 ++------ 8 files changed, 36 insertions(+), 31 deletions(-) diff --git a/docs/docs/configuration/tooltip.md b/docs/docs/configuration/tooltip.md index f2664b42055..a4b1a67da65 100644 --- 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 c96159541d8..332779e9a34 100644 --- 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 764852f561e..004366e02c5 100644 --- 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 1d14d2e14b0..a5c78e525ed 100644 --- 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 738217329ec..8a67255c1a4 100644 --- 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 1bc89d95cde..1f7076257ff 100644 --- 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 c0fa90a1c36..9a7291d6216 100644 --- 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 a2933237cb3..1f1e762193a 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -2418,15 +2418,10 @@ export interface TooltipOptions 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