Merge pull request #6901 from OBe95/fix-hovermode-x-tooltip-pointer

fix: tooltip pointer position in hovermode x

Author: archmoj

draftlogs/6900_fix.md

@@ -0,0 +1 @@
+- Fix tooltip pointer position calculation when hovermode is set to 'x' - [issue [#6900](https://github.com/plotly/plotly.js/issues/6900) | PR [#6901](https://github.com/plotly/plotly.js/pull/6901)]

src/components/fx/hover.js

@@ -999,35 +999,23 @@ function createHoverText(hoverData, opts) {
 
             var halfWidth = tbb.width / 2 + HOVERTEXTPAD;
 
+            var tooltipMidX = lx;
             if(lx < halfWidth) {
-                lx = halfWidth;
-
-                lpath.attr('d', 'M-' + (halfWidth - HOVERARROWSIZE) + ',0' +
-                    'L-' + (halfWidth - HOVERARROWSIZE * 2) + ',' + topsign + HOVERARROWSIZE +
-                    'H' + (halfWidth) +
-                    'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
-                    'H-' + halfWidth +
-                    'V' + topsign + HOVERARROWSIZE +
-                    'Z');
+                tooltipMidX = halfWidth;
             } else if(lx > (fullLayout.width - halfWidth)) {
-                lx = fullLayout.width - halfWidth;
-
-                lpath.attr('d', 'M' + (halfWidth - HOVERARROWSIZE) + ',0' +
-                    'L' + halfWidth + ',' + topsign + HOVERARROWSIZE +
-                    'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
-                    'H-' + halfWidth +
-                    'V' + topsign + HOVERARROWSIZE +
-                    'H' + (halfWidth - HOVERARROWSIZE * 2) + 'Z');
-            } else {
-                lpath.attr('d', 'M0,0' +
-                    'L' + HOVERARROWSIZE + ',' + topsign + HOVERARROWSIZE +
-                    'H' + (halfWidth) +
-                    'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
-                    'H-' + (halfWidth) +
-                    'V' + topsign + HOVERARROWSIZE +
-                    'H-' + HOVERARROWSIZE + 'Z');
+                tooltipMidX = fullLayout.width - halfWidth;
             }
 
+            lpath.attr('d', 'M' + (lx - tooltipMidX) + ',0' +
+                'L' + (lx - tooltipMidX + HOVERARROWSIZE) + ',' + topsign + HOVERARROWSIZE +
+                'H' + halfWidth +
+                'v' + topsign + (HOVERTEXTPAD * 2 + tbb.height) +
+                'H' + (-halfWidth) +
+                'V' + topsign + HOVERARROWSIZE +
+                'H' + (lx - tooltipMidX - HOVERARROWSIZE) +
+                'Z');
+
+            lx = tooltipMidX;
             commonLabelRect.minX = lx - halfWidth;
             commonLabelRect.maxX = lx + halfWidth;
             if(xa.side === 'top') {