Page 1 of 1

Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 1:33 pm
by DarioN1
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

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 2:34 pm
by DarioN1
Sorry, this is the image:

https://ibb.co/kGwb7L0

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 3:41 pm
by DarioN1
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

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 6:12 pm
by mateusz.b
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!

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 8:48 pm
by DarioN1
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

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 8:55 pm
by mateusz.b
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!

Re: Tooltip is closing when moving mouse out of chart

Posted: Fri Oct 15, 2021 11:33 pm
by DarioN1
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

Re: Tooltip is closing when moving mouse out of chart

Posted: Tue Oct 19, 2021 1:42 pm
by mateusz.b
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!