Tooltip with `outside: true` renders outside the viewport

[ItaiYosephi]

Expected behaviour

Tooltip should not overflow the viewport

Actual behaviour

Tooltip sometimes renders outside the viewport (causes scrollbar to appear)

Live demo with steps to reproduce

https://codepen.io/itaiyos/pen/RwmKqoN

This started in version 11.0.0
most likely related to one of these:
#18681
#18692

Related issue:
#21158

Product version

11.0.0-11.4.3

CleanShot.2024-05-30.at.20.05.37.mp4

[bm64]

Hello @ItaiYosephi

The scroll can be prevented by setting CSS overflow: hidden for example on the website root element: https://jsfiddle.net/BlackLabel/85w7nhmj/
But that doesn't resolve the issue with tooltip being positioned partially outside of the viewport. It seems like it used to work better in v10.3.3: https://jsfiddle.net/BlackLabel/415yLbqe/

Internal note:
Unable to bisect

[ItaiYosephi]

Hi @bm64
is there a workaround for now?
I tried to play with the positioner(). If I had way to know what's the position highcharts is going to use, I could update the position accordingly to prevent the issue.
But for some reason tooltip.getPosition() doesn't always return the position that's actually used by highcharts to show the tooltip...
just to be clear, I would expect that if this is pssed to the tooltip options:

    positioner(width, height, point) {
        return this.getPosition.call(this, width, height, point);
    },

the position of the tooltip would be the same as if I didn't pass positioner at all. But sometimes the tooltip is way off when I do that. Am I missing something?

[ItaiYosephi]

Hi @bm64,

Any update on whether my suggested workaround would be possible?
Is there an ETA for a fix?

[bm64]

Hi @ItaiYosephi

Unfortunately we don't have any ETA yet for the fix, but please try this solution with positioner and window.innerWidth: https://jsfiddle.net/BlackLabel/g0kv37j2/
This should keep the tooltip within the viewport.

[ItaiYosephi]

@bm64
Thanks for your reply!
This workaround doesn't work when the chart is further down the screen:
https://jsfiddle.net/rdsubqpj/12/
What's why I was wondering in my previous comment what position getPosition actually returns. It's obviously not the
final position that highcharts uses to determine the final position of the tooltip.

[ItaiYosephi]

@MarkusBarstad @TorsteinHonsi
Hi, seems like there is some kind of improvement, but still not completely fixed:

CleanShot.2024-10-09.at.09.53.01.mp4