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

Tooltip is closing when moving mouse out of chart

Fri Oct 15, 2021 1:33 pm

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

Fri Oct 15, 2021 3:41 pm

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: 764
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

Fri Oct 15, 2021 6:12 pm

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!

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

Re: Tooltip is closing when moving mouse out of chart

Fri Oct 15, 2021 8:48 pm

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: 764
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

Fri Oct 15, 2021 8:55 pm

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!

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

Re: Tooltip is closing when moving mouse out of chart

Fri Oct 15, 2021 11:33 pm

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: 764
Joined: Tue Jul 13, 2021 11:34 am

Re: Tooltip is closing when moving mouse out of chart

Tue Oct 19, 2021 1:42 pm

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!

Return to “Highcharts Gantt”