bugfix/13780-tooltip-reversed-y

samples/unit-tests/axis/reversed/demo.js

@@ -1,6 +1,16 @@
 QUnit.test(
     'Reversed yAxis for bar charts cause detached columns from axis (#4504)',
     function (assert) {
+
+        const tooltipCenter = tooltip => {
+            const label = tooltip.getLabel();
+            return [
+                label.translateX + label.width / 2,
+                label.translateY + label.height / 2
+            ];
+        };
+
+
         var options = {
                 chart: {
                     type: 'column'
@@ -21,7 +31,6 @@ QUnit.test(
                 ]
             },
             charts = [],
-            point,
             y,
             height,
             container1,
@@ -50,9 +59,10 @@ QUnit.test(
         charts[3] = $(container4).highcharts(options).highcharts();
 
         $.each([charts[0], charts[3]], function (i, chart) {
-            point = chart.series[0].data[1].graphic;
-            y = parseFloat(point.attr('y'));
-            height = parseFloat(point.attr('height'));
+            const point = chart.series[0].data[1],
+                graphic = point.graphic;
+            y = parseFloat(graphic.attr('y'));
+            height = parseFloat(graphic.attr('height'));
             assert.strictEqual(
                 y + height > chart.plotHeight,
                 true,
@@ -69,11 +79,28 @@ QUnit.test(
                 0,
                 'Zero point should be zero height (#4656)'
             );
+
+            // Test tooltip position
+            point.onMouseOver();
+            if (chart.inverted) {
+                assert.ok(
+                    tooltipCenter(chart.tooltip)[0] >
+                        point.tooltipPos[0] + chart.plotLeft,
+                    'The tooltip should be right to the graphic'
+                );
+            } else {
+                assert.ok(
+                    tooltipCenter(chart.tooltip)[1] <
+                        point.tooltipPos[1] + chart.plotTop,
+                    'The tooltip should be above the graphic'
+                );
+            }
         });
 
         $.each([charts[1], charts[2]], function (i, chart) {
-            point = chart.series[0].data[1].graphic;
-            y = parseFloat(point.attr('y'));
+            const point = chart.series[0].data[1],
+                graphic = point.graphic;
+            y = parseFloat(graphic.attr('y'));
             assert.strictEqual(
                 y < 0,
                 true,
@@ -90,6 +117,23 @@ QUnit.test(
                 0,
                 'Zero point should be zero height (#4656)'
             );
+
+
+            // Test tooltip position
+            point.onMouseOver();
+            if (chart.inverted) {
+                assert.ok(
+                    tooltipCenter(chart.tooltip)[0] <
+                        point.tooltipPos[0] + chart.plotLeft,
+                    'The tooltip should be left to the graphic'
+                );
+            } else {
+                assert.ok(
+                    tooltipCenter(chart.tooltip)[1] >
+                        point.tooltipPos[1] + chart.plotTop,
+                    'The tooltip should be below the graphic'
+                );
+            }
         });
 
         // Clean up

ts/Core/Tooltip.ts

@@ -688,10 +688,21 @@ class Tooltip {
         let first = buildDimensionArray('y'),
             second = buildDimensionArray('x'),
             swapped: (boolean|undefined);
+
+        // Handle negative points or reversed axis (#13780)
+        let flipped = !!point.negative;
+        if (
+            chart.hoverSeries &&
+            chart.hoverSeries.yAxis &&
+            chart.hoverSeries.yAxis.reversed
+        ) {
+            flipped = !flipped;
+        }
         // The far side is right or bottom
-        const preferFarSide = !this.followPointer && pick(
+        const preferFarSide = !this.followPointer &&
+            pick(
                 point.ttBelow,
-                !chart.inverted === !!point.negative
+                !chart.inverted === flipped
             ), // #4984
 
             /*

ts/Series/MapBubble/MapBubblePoint.ts

@@ -88,19 +88,6 @@ class MapBubblePoint extends BubbleSeries.prototype.pointClass {
 
 }
 
-/* *
- *
- *  Class Prototype
- *
- * */
-
-interface MapBubblePoint {
-    ttBelow: boolean;
-}
-extend(MapBubblePoint.prototype, {
-    ttBelow: false
-});
-
 /* *
  *
  *  Default Export

ts/Series/XRange/XRangePoint.ts

@@ -234,6 +234,7 @@ interface XRangePoint {
 
 }
 extend(XRangePoint.prototype, {
+    ttBelow: false,
     tooltipDateKeys: ['x', 'x2']
 });