Fix tooltip caret border when caret is on right or bottom (#7565)

* Fix tooltip caret border when caret is on right or bottom
* Lint fixes

* Code review feedback

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 2ca517b5d31a3ef1bb4da5c42251d290bffd0ca1..93b74bcfa44473d325f1ad9ab9d94ebc90d58ba5 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -694,13 +694,20 @@ export class Tooltip extends Element {
                        if (xAlign === 'left') {
                                x1 = ptX;
                                x2 = x1 - caretSize;
+
+                               // Left draws bottom -> top, this y1 is on the bottom
+                               y1 = y2 + caretSize;
+                               y3 = y2 - caretSize;
                        } else {
                                x1 = ptX + width;
                                x2 = x1 + caretSize;
+
+                               // Right draws top -> bottom, thus y1 is on the top
+                               y1 = y2 - caretSize;
+                               y3 = y2 + caretSize;
                        }
+
                        x3 = x1;
-                       y1 = y2 + caretSize;
-                       y3 = y2 - caretSize;
                } else {
                        if (xAlign === 'left') {
                                x2 = ptX + cornerRadius + (caretSize);
@@ -709,14 +716,21 @@ export class Tooltip extends Element {
                        } else {
                                x2 = this.caretX;
                        }
-                       x1 = x2 - caretSize;
-                       x3 = x2 + caretSize;
+
                        if (yAlign === 'top') {
                                y1 = ptY;
                                y2 = y1 - caretSize;
+
+                               // Top draws left -> right, thus x1 is on the left
+                               x1 = x2 - caretSize;
+                               x3 = x2 + caretSize;
                        } else {
                                y1 = ptY + height;
                                y2 = y1 + caretSize;
+
+                               // Bottom draws right -> left, thus x1 is on the right
+                               x1 = x2 + caretSize;
+                               x3 = x2 - caretSize;
                        }
                        y3 = y1;
                }