diff --git a/samples/unit-tests/tooltip/split/demo.js b/samples/unit-tests/tooltip/split/demo.js index 581c4cca460..6eac4912e33 100644 --- 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 index 0c1e1b487ad..850e56bff9b 100644 --- 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 );