When useHTML and stickOnContact set, tooltip freezes sometimes.

[karolkolodziej]

Expected behaviour

Smooth tooltip refreshing.

Actual behaviour

When useHTML and stickOnContact set to true, tooltip freezes sometimes while hovering over chart.

Live demo with steps to reproduce

http://jsfiddle.net/BlackLabel/txavf7ec/

Product version

Highcharts JS v10.2.1 (2022-08-29)

Affected browser(s)

All

[OliverDamsbjerg]

Is there an estimation of when this might be looked at? It happens a lot more in our project compared to the example shown and it's confusing a lot of people here.

[bre1470]

Turning useHTML off makes it work flawless. The issue starts with v9.2.0.

[el-davo]

Is anyone aware of a workaround other than turning off HTML? Unfortunately we need this turned on as it is a custom tooltip

[hryhorii-kharchenko-digis]

Unfortunately, the proposed workaround of disabling "useHTML" option doesn't satisfy our goals, since we display an HTML table inside of the tooltip. We also cannot turn off "stickOnContact" option, because we use a link inside of the tooltip.

Is there any other workaround we could use?

[tsahilevi]

This makes the whole use of rich tooltips on charts unusable and a workaround of using only text isn't really a workaround...
It would be great if this can be properly prioritized and addressed. For us, we will need to evaluate our use of highcharts

[TorsteinHonsi]

Thank you for your patience! I created a draft PR but it requires some validation. Please check out the OP chart with the fix applied here: http://jsfiddle.net/highcharts/0ubatfdr/

[TorsteinHonsi]

@hryhorii-kharchenko-digis and @tsahilevi we now have something we believe will fix the issue. But to be absolutely sure, it would be great if you test it in your actual implementation. You can load https://github.highcharts.com/047bc85/highcharts.js .

[TorsteinHonsi]

Okay, since I didn't hear anything I assume it works well and merge the PR.

[hryhorii-kharchenko-digis]

@TorsteinHonsi
Sorry, I found what now seems to be an unrelated bug while testing on our setup and was busy trying to create a reproducible demo.

Your fix in question seems to work for our use-case. But I accidentally noticed that it breaks "outside" option, which was working before. When you hover on the tooltip it disappears completely.

Before fix with "outside": true
http://jsfiddle.net/bzhg0vjo/2/

After fix with "outside": true
http://jsfiddle.net/Ljxd37cf/

[hryhorii-kharchenko-digis]

@TorsteinHonsi
Just to make sure you would notice: the approved solution might have a bug with the "outside" option. I've provided demos in the comment above.

[el-davo]

@TorsteinHonsi Was the approved solution deployed to npm registry? The latest I see is 10.2.1, which was from a month ago - npmjs.com/package/highcharts

[TorsteinHonsi]

@el-davo, it is not yet deployed, only available in master. You can test it using the link above.

@hryhorii-kharchenko-digis Thanks for reporting back! I will check this issue with outside. I notice that it didn't work well before the fix either - the tooltip won't move if I mousemove towards the left, and once it is hidden it doesn't appear again.

[TorsteinHonsi]

The remaining issue with outside and stickOnContact comes from pointer-events: auto being applied on the tooltip container. With split tooltip, this container covers the chart, blocking pointer events.

highcharts/ts/Core/Tooltip.ts

Line 490 in 6699570

pointerEvents,

I tried setting pointer-events: none on the container and still pointer-events: auto on the label itself. This makes the tooltip appear but doesn't honor the stickOnContact setting.

By making the tooltip container visible we can see how it blocks mouse interaction: https://jsfiddle.net/highcharts/5xr3n28s/

[el-davo]

Hi @TorsteinHonsi I notice this issue is closed but the fix is not deployed to npm registry. Is it possible for the fix to be deployed there?. We are using npm for dependency management so its not a trivial thing to use the file available on master

[pawellysy]

@el-davo, it will be included in the next official release, which should take place soon. Thanks for your patience!