Highcharts Gantt avoid tooltip closure when moving cursor outside Gantt

Question

Hi I have a Gantt chart where I have implemented a custom tooltip that appear/disappear when the user clicks on an event.

I'm using angular2-highcharts

This works great !

The problem is that when the tooltip is very big and when it is rendered half on the Gantt area and half OUTSIDE the Gantt area and the user moves the cursor outside the Gantt... The tooltip disappear.

How can I prevent this behavior ?

Just to be clear, if you check the image below: if I move the cursor below the redline, the tooltip disappear

Thanks to support

This is the stackblitz with the code:

https://highcharts-angular-gantt-6jausr.stackblitz.io

https://stackblitz.com/edit/highcharts-angular-gantt-6jausr

Answer 1

It's normal behavior of a tooltip that is active when you hover over the point. You need to set stickOnContact: true if you want to prevent the tooltip from switching or closing when touched or pointed.

Live demo: https://stackblitz.com/edit/highcharts-angular-gantt-4urdh9

API References: https://api.highcharts.com/gantt/tooltip.stickOnContact