0

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

enter image description here

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

DarioN1
  • 2,460
  • 7
  • 32
  • 67

1 Answers1

0

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

Sebastian Hajdus
  • 1,422
  • 1
  • 5
  • 14
  • actually this is not working, if you check, when you the tooltip is opened and you move the cursor outsite the gantt tabel, the tooltip disappears – DarioN1 Oct 25 '21 at 08:24
  • It's also normal behavior for tooltip. Your tooltip's more custom and if you want to prevent close, you might try to edit core code. https://www.highcharts.com/docs/extending-highcharts/extending-highcharts – Sebastian Hajdus Oct 25 '21 at 19:40