Tooltip hangs when component loses focus

Tooltips are hanging and are not being cleaned up when the mouse exits the component viewport.

I’m using Gantt.getGanttInstance() for each instance. When I reopen a view multiple times (and thus creating new instances) I can build up multiple hanging tooltips.

gantt tooltip hangs

Hello @Octorilla ,

Thank you for the provided details. We are aware of the issue with tooltips hanging when the mouse is quickly moved outside the Gantt container. The dev team will fix the bug in the future. However, I am unable to give you any ETA for the fix at this time.

As a workaround, you can check the mouse position and manually hide the tooltip by using the gantt.ext.tooltips.tooltip.hide method.

Here’s an example of this workaround: DHTMLX Snippet Tool.

Regarding this:

I’m using Gantt.getGanttInstance() for each instance. When I reopen a view multiple times (and thus creating new instances), I can build up multiple hanging tooltips.

You need to destroy the Gantt instance when you create a new Gantt instance: Multiple Charts on a Page Gantt Docs.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

thx for the workaround will check it out.

I also noticed related behavior.

When tooltips are enabled. When you move a task and while moving the mouse cursor enters the tooltip then the dragging is stopped. It seems as if the task is completely blocked. It took me some time to realize that the tooltip is the issue.

Let me know if you want me to provide a animated gif or something for this issue. The best approach to me seems to remove the tooltip on start dragging.

this helps a bit because it removes the current tooltip. But it doesn’t prevent another task of starting a tooltip when passing through it. I didn’t see any ON_BEFORE_TOOLTIP_SHOW event where I could cancel showing the tooltip while dragging.

	gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
		if (gantt.ext?.tooltips?.tooltip) {
			gantt.ext.tooltips.tooltip.hide();
		}
		return true;
	});

Thank you for reporting this issue.

Unfortunately, I wasn’t able to reproduce this issue. It may be useful if you send me a simplified code snippet so I can try to reproduce the issue and research for a possible solution. Please make sure that the issue is reproduced there: DHTMLX - Gantt. Initialization.

Then, click on the Save button. After receiving the link, open it in another tab and check that everything is saved, and then send me this link. If not saved, you can copy the code from the snippet and send it in a text file.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer

I rebuild what i have in my application. It actually took quite a while before I understood what was causing the behavior and before I realized it was related to the tooltip. That’s why I added a recording.

As long as you drag and keep the mouse nice and straight so it won’t hit the tooltip (or where the tooltip will come) it runs fine. The moment the mouse pointer deviates from that line and you enter where the tooltip will be, the dragging is cancelled.

In the snippet, changing the timeout to 0 will show the tooltip faster and shows more blocking

gantt.config.tooltip_timeout = 0;

https://snippet.dhtmlx.com/alq0m4lo

tooltip dragging cancelled

Thank you for the provided snippet!
Yes, this is a known behavior. When we use the tooltip and drag a task, it might happen that the task cannot be dragged because the mouse is over the tooltip. We will add the information about this behavior and the way to prevent it if necessary to the documentation.

To prevent this behavior, you can disable pointer events for the tooltip with the following CSS rule:

 .gantt_tooltip {
   pointer-events: none;
 }

Please check the example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer