From f5c9a656eff999a07c2e3eebf19ee4c46efdfbfa Mon Sep 17 00:00:00 2001
From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Mon, 6 Sep 2021 09:13:21 -0400
Subject: [PATCH] Configurable tooltip box padding (#9625)

---
 docs/configuration/tooltip.md                |   1 +
 src/plugins/plugin.tooltip.js                |  13 ++--
 test/fixtures/plugin.tooltip/box-padding.js  |  71 +++++++++++++++++++
 test/fixtures/plugin.tooltip/box-padding.png | Bin 0 -> 14617 bytes
 types/index.esm.d.ts                         |   5 ++
 5 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 test/fixtures/plugin.tooltip/box-padding.js
 create mode 100644 test/fixtures/plugin.tooltip/box-padding.png

diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 936f9202c..2c68ed9d7 100644
--- a/docs/configuration/tooltip.md
+++ b/docs/configuration/tooltip.md
@@ -37,6 +37,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
 | `displayColors` | `boolean` | `true` | If true, color boxes are shown in the tooltip.
 | `boxWidth` | `number` | `bodyFont.size` | Width of the color box if displayColors is true.
 | `boxHeight` | `number` | `bodyFont.size` | Height of the color box if displayColors is true.
+| `boxPadding` | `number` | `1` | Padding between the color box and the text.
 | `usePointStyle` | `boolean` | `false` | Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight).
 | `borderColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0)'` | Color of the border.
 | `borderWidth` | `number` | `0` | Size of the border.
diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 231506b73..f932cb15f 100644
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -187,7 +187,7 @@ function getTooltipSize(tooltip, options) {
   each(tooltip.beforeBody.concat(tooltip.afterBody), maxLineWidth);
 
   // Body lines may include some extra width due to the color box
-  widthPadding = options.displayColors ? (boxWidth + 2) : 0;
+  widthPadding = options.displayColors ? (boxWidth + 2 + options.boxPadding) : 0;
   each(body, (bodyItem) => {
     each(bodyItem.before, maxLineWidth);
     each(bodyItem.lines, maxLineWidth);
@@ -681,7 +681,7 @@ export class Tooltip extends Element {
     const me = this;
     const labelColors = me.labelColors[i];
     const labelPointStyle = me.labelPointStyles[i];
-    const {boxHeight, boxWidth} = options;
+    const {boxHeight, boxWidth, boxPadding} = options;
     const bodyFont = toFont(options.bodyFont);
     const colorX = getAlignedX(me, 'left', options);
     const rtlColorX = rtlHelper.x(colorX);
@@ -717,8 +717,8 @@ export class Tooltip extends Element {
       ctx.lineDashOffset = labelColors.borderDashOffset || 0;
 
       // Fill a white rect so that colours merge nicely if the opacity is < 1
-      const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth);
-      const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - 2);
+      const outerX = rtlHelper.leftForLtr(rtlColorX, boxWidth - boxPadding);
+      const innerX = rtlHelper.leftForLtr(rtlHelper.xPlus(rtlColorX, 1), boxWidth - boxPadding - 2);
       const borderRadius = toTRBLCorners(labelColors.borderRadius);
 
       if (Object.values(borderRadius).some(v => v !== 0)) {
@@ -763,7 +763,7 @@ export class Tooltip extends Element {
   drawBody(pt, ctx, options) {
     const me = this;
     const {body} = me;
-    const {bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth} = options;
+    const {bodySpacing, bodyAlign, displayColors, boxHeight, boxWidth, boxPadding} = options;
     const bodyFont = toFont(options.bodyFont);
     let bodyLineHeight = bodyFont.lineHeight;
     let xLinePadding = 0;
@@ -789,7 +789,7 @@ export class Tooltip extends Element {
     each(me.beforeBody, fillLineOfText);
 
     xLinePadding = displayColors && bodyAlignForCalculation !== 'right'
-      ? bodyAlign === 'center' ? (boxWidth / 2 + 1) : (boxWidth + 2)
+      ? bodyAlign === 'center' ? (boxWidth / 2 + boxPadding) : (boxWidth + 2 + boxPadding)
       : 0;
 
     // Draw body lines now
@@ -1166,6 +1166,7 @@ export default {
     boxWidth: (ctx, opts) => opts.bodyFont.size,
     multiKeyBackground: '#fff',
     displayColors: true,
+    boxPadding: 0,
     borderColor: 'rgba(0,0,0,0)',
     borderWidth: 0,
     animation: {
diff --git a/test/fixtures/plugin.tooltip/box-padding.js b/test/fixtures/plugin.tooltip/box-padding.js
new file mode 100644
index 000000000..434620edd
--- /dev/null
+++ b/test/fixtures/plugin.tooltip/box-padding.js
@@ -0,0 +1,71 @@
+const data = [];
+for (let x = 0; x < 3; x++) {
+  for (let y = 0; y < 3; y++) {
+    data.push({x, y});
+  }
+}
+
+module.exports = {
+  config: {
+    type: 'scatter',
+    data: {
+      datasets: [{
+        data,
+        backgroundColor: 'red',
+        radius: 1,
+        hoverRadius: 0
+      }],
+    },
+    options: {
+      scales: {
+        x: {display: false},
+        y: {display: false}
+      },
+      plugins: {
+        legend: false,
+        title: false,
+        filler: false,
+        tooltip: {
+          mode: 'point',
+          intersect: true,
+          // spriteText: use white background to hide any gaps between fonts
+          backgroundColor: 'white',
+          borderColor: 'black',
+          borderWidth: 1,
+          callbacks: {
+            label: () => 'label',
+          },
+          boxPadding: 30
+        },
+      },
+    },
+    plugins: [{
+      afterDraw: function(chart) {
+        const canvas = chart.canvas;
+        const rect = canvas.getBoundingClientRect();
+        const meta = chart.getDatasetMeta(0);
+        let point, event;
+
+        for (let i = 0; i < data.length; i++) {
+          point = meta.data[i];
+          event = {
+            type: 'mousemove',
+            target: canvas,
+            clientX: rect.left + point.x,
+            clientY: rect.top + point.y
+          };
+          chart._handleEvent(event);
+          chart.tooltip.handleEvent(event);
+          chart.tooltip.draw(chart.ctx);
+        }
+      }
+    }]
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 400,
+      width: 500
+    }
+  }
+};
diff --git a/test/fixtures/plugin.tooltip/box-padding.png b/test/fixtures/plugin.tooltip/box-padding.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3cd19e202e565d3d3162feba7ca422f2a928608
GIT binary patch
literal 14617
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
W8%vxgv;@;o+x@#nI_26AU;Hm&24#Q%

literal 0
Hc-jL100001

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index 1e3485e53..5ea417ea3 100644
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2216,6 +2216,11 @@ export interface LegendOptions<TType extends ChartType> {
      * @default fontSize
      */
     boxHeight: number;
+    /**
+     * Padding between the color box and the text
+     * @default 1
+     */
+    boxPadding: number;
     /**
      * Color of label
      * @see Defaults.color
-- 
2.47.2