When using tooltip.outside, tooltip gets misaligned

[rizzotto]

Expected behavior

Tooltip should not get misaligned when using outside: true property

Actual behavior

Tooltip is not aligned properly when using the outside prop

Live demo with steps to reproduce

Check the demo example https://jsfiddle.net/rizzotto/urhkswtj/ and set the property outside to true

[raf18seb]

Hi @rizzotto, thank you for reporting a bug!

Internal note:
The tooltip's position is not being corrected by tooltip.distance in the tooltip.updatePosition() method when tooltip.outside is true.

Workaround: correct the position with this pos.x -= this.distance / 2;: https://jsfiddle.net/BlackLabel/yfxp9hkL/
The issue is visible only with tooltip.positioner

[rizzotto]

Hey @raf18seb thanks for answering, also the Y is misaligned.

Do you have an ETA for this one?

Thanks!

[raf18seb]

We are preparing for the v10 release now, so no specific ETA for this bug, sorry. I'll put it into our development flow (Inbox tag).
If you're our licensed customer, please contact us at support@highcharts.com with your license ID, then we'll try to speed it up.

[TorsteinHonsi]

The connection to distance in the OP demo is probably a coincidence. Instead, I think it's about the chart's position in the page. The positioner is not corrected for the chart position.

• When the body has a 0 margin, the position is correct.
• When the body has another margin, the position is off by that margin
• In a real-life web page, it is off.

Workaround

        positioner(labelWidth, labelHeight, point) {
            const chartPosition = this.chart.pointer.getChartPosition();
            return {
                x: chartPosition.left + point.plotX + this.chart.plotLeft - labelWidth / 2,
                y: chartPosition.top + this.chart.plotTop - 20,
            }
        },

View it live on jsFiddle