tooltip.stickOnContact has no effect in styled mode
Expected behaviour
With tooltip.stickOnContact: true, moving the pointer from a point onto the tooltip keeps the tooltip open, so its content can be read or clicked.
Actual behaviour
With chart.styledMode: true the option has no effect. The tooltip keeps pointer-events: none from css/highcharts.css, so the pointer never reaches it and the tooltip closes as soon as it leaves the point.
The option's only implementation is the pointerEvents assignment in Tooltip#getLabel (Core/Tooltip.js), which sits inside an if (!styledMode) branch. In styled mode that branch never runs, so the option is inert.
Live demo with steps to reproduce
https://jsfiddle.net/8ta91kqy/ — styledMode: true, tooltip: { stickOnContact: true }, loading the unversioned highcharts.js and css/highcharts.css, so it runs on the current release.
- Hover the first point of any of the series.
- Move the pointer towards the tooltip, away from the plot area.
- The tooltip closes instead of staying open. It is never possible to move the pointer onto it.
Setting styledMode: false on the same configuration makes it behave as documented.
Measured locally on 12.2.0, plain Highcharts, no framework, changing only styledMode:
| styledMode | computed pointer-events on .highcharts-tooltip |
pointer reaches tooltip |
|---|---|---|
true |
none |
no |
false |
auto |
yes |
Product version
Reproduced on the current CDN build and verified locally on 12.2.0.
Affected browser(s)
Chromium. Not browser specific — the tooltip is not hit-testable in any browser.
Note
This overlaps with #12394, closed as "not a bug" with the advice to set .highcharts-tooltip { pointer-events: auto } in CSS. That is a fair answer for user-authored tooltip styling. The difference here is that a built-in option silently does nothing, and the tooltip documentation now recommends stickOnContact as the remedy for the clickable-links case that #12394 was about:
"For clickable links inside the tooltip, use
tooltip.stickOnContact. This keeps the tooltip visible when moving the pointer from the point to the tooltip content."
Either applying the option's pointer-events in styled mode as well, or noting the limitation on the API page, would remove the ambiguity.
Source: highcharts/highcharts