Fixed #19314, wrong tooltip size with outside prop enabled.

highcharts · Aug 23, 2023 · f45713a · f45713a
1 parent a0d3f8f
commit f45713a
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/samples/unit-tests/tooltip/split/demo.js b/samples/unit-tests/tooltip/split/demo.js
@@ -232,6 +232,38 @@ QUnit.test('Split tooltip with useHTML and outside', function (assert) {
         `Tooltip with outside and split properties set to true should be
         rendered properly - y position (#17720).`
     );
+    chart.update({
+        tooltip: {
+            shadow: false
+        }
+    });
+
+    chart.tooltip.refresh(chart.series[0].points[0]);
+    const tooltipClientRect = chart.tooltip.container.getBoundingClientRect();
+
+    chart.update({
+        tooltip: {
+            shadow: true
+        }
+    });
+
+    chart.tooltip.refresh(chart.series[0].points[0]);
+
+    assert.close(
+        tooltipClientRect.width,
+        chart.tooltip.container.getBoundingClientRect().width,
+        1,
+        `Tooltip's shadow offsetX should be evaluated in container width
+        to avoid cutting it off (#19314).`
+    );
+
+    assert.close(
+        tooltipClientRect.height,
+        chart.tooltip.container.getBoundingClientRect().height,
+        1,
+        `Tooltip's shadow offsetY should be evaluated in container height
+        to avoid cutting it off (#19314).`
+    );
 });
 
 QUnit.test('Split tooltip in floated container (#13943),', function (assert) {

diff --git a/ts/Core/Tooltip.ts b/ts/Core/Tooltip.ts
@@ -46,6 +46,7 @@ const {
     fireEvent,
     isArray,
     isNumber,
+    isObject,
     isString,
     merge,
     pick,
@@ -1805,17 +1806,27 @@ class Tooltip {
 
         // Set the renderer size dynamically to prevent document size to change
         if (this.outside && container) {
+            const shadowOptions = options.shadow;
+            let offsetY = 1,
+                offsetX = 1;
             // Corrects positions, occurs with tooltip positioner (#16944)
             if (options.positioner) {
                 pos.x += left - distance;
                 pos.y += top - distance;
             }
 
-            pad = (options.borderWidth || 0) + 2 * distance;
+            // Pick correct shadow offset
+            if (isObject(shadowOptions)) {
+                offsetX = pick(shadowOptions.offsetX, 1);
+                offsetY = pick(shadowOptions.offsetY, 1);
+            }
 
+            pad = (options.borderWidth || 0) + 2 * distance;
+            // Count in shadow offset to avoid cutting it off, #19314
+            // Offset is multiplied by 2 as a safe number for lower resolutions
             (this.renderer as any).setSize(
-                label.width + pad,
-                label.height + pad,
+                label.width + offsetX * 2 + pad,
+                label.height + offsetY * 2 + pad,
                 false
             );