Fix tooltip caret position when it is positioned at the corners (#9922)

* Fix tooltip caret position when  at the corners

* Add test

Co-authored-by: Dirk Gausmann <di.gaus@gmx.de>

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index fd068e7aa7b74783b156ab12581a2cb3768e5758..323bafa3a8d2cb70b53181b3b3756c677b2db849 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -306,9 +306,9 @@ function getBackgroundPoint(options, size, alignment, chart) {
       x -= paddingAndSize;
     }
   } else if (xAlign === 'left') {
-    x -= Math.max(topLeft, bottomLeft) + caretPadding;
+    x -= Math.max(topLeft, bottomLeft) + caretSize;
   } else if (xAlign === 'right') {
-    x += Math.max(topRight, bottomRight) + caretPadding;
+    x += Math.max(topRight, bottomRight) + caretSize;
   }
 
   return {

diff --git a/test/fixtures/plugin.tooltip/caret-position.js b/test/fixtures/plugin.tooltip/caret-position.js
new file mode 100644 (file)
index 0000000..0997c11
--- /dev/null
+++ b/test/fixtures/plugin.tooltip/caret-position.js
@@ -0,0 +1,70 @@
+const data = [];
+for (let x = 1; x < 4; x++) {
+  for (let y = 1; y < 4; y++) {
+    data.push({x, y});
+  }
+}
+
+module.exports = {
+  config: {
+    type: 'scatter',
+    data: {
+      datasets: [{
+        data,
+        backgroundColor: 'red',
+        radius: 8,
+        hoverRadius: 0
+      }],
+    },
+    options: {
+      scales: {
+        x: {display: false, min: 0.96, max: 3.04},
+        y: {display: false, min: 1, max: 3}
+      },
+      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',
+          }
+        },
+      },
+    },
+    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: 240,
+      width: 320
+    }
+  }
+};

diff --git a/test/fixtures/plugin.tooltip/caret-position.png b/test/fixtures/plugin.tooltip/caret-position.png
new file mode 100644 (file)
index 0000000..147f87e
Binary files /dev/null and b/test/fixtures/plugin.tooltip/caret-position.png differ