DarioN1
Posts: 9
Joined: Fri Oct 15, 2021 1:23 pm

Tooltip is closing when moving mouse out of chart

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

This works great ! 8)

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

How can I prevent this behavior ?

Image

Just to be more clear: if I move the cursor below the red line... Tooltip disappear

Thanks to support
DarioN1
Posts: 9
Joined: Fri Oct 15, 2021 1:23 pm

Re: Tooltip is closing when moving mouse out of chart

This is the code:

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

https://stackblitz.com/edit/highcharts- ... ntt-6jausr

Its pretty a mess because I had to implement lof of customizations...
Its very bad code but anyway... you can see the problem :D
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

Hello DarioN1,

Welcome to our forum and thanks for contacting us with your question!

stickOnContact option should help in this case.
Demo: https://stackblitz.com/edit/highcharts- ... ntt-n4xpum
API reference:https://api.highcharts.com/gantt/tooltip.stickOnContact

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
DarioN1
Posts: 9
Joined: Fri Oct 15, 2021 1:23 pm

Re: Tooltip is closing when moving mouse out of chart

Thanks Mateusz but it doesn't work...

https://highcharts-angular-gantt-n4xpum.stackblitz.io/

If you try to open che tooltip by clicking on it and move the cursor outside the gant, the tooltip disappear even with stickOnContact
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

DarioN1,

I know the topic title suggests it, but should the tooltip be visible even when cursor leaves chart's container? If so how would you hide that tooltip? Thanks for these informations.

Best regards!
Mateusz Bernacik
Highcharts Developer
DarioN1
Posts: 9
Joined: Fri Oct 15, 2021 1:23 pm

Re: Tooltip is closing when moving mouse out of chart

Sorry, I have forgotten to add bootstrap/fontawesome to the code so that was tricky.

Tooltip appears at click event and must stay active untill the user hit the " X " button inside the tooltip.

Now the button are visible, I have updated the stackblitz example

Hope its clear,
Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

Hi DarioN1,

To achieve something like that you need to change slightly your approach. Now your tooltip disappear because you disable it on mouseOut event. I understand that you do it to prevent selecting other tooltip. The solution is slightly more complicated and here you can find a demo showing how to do that. Try to implement that logic in your angular app.
Demo: http://jsfiddle.net/BlackLabel/wxgo62yn/

Feel free to ask any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Gantt”