There’s an issue where if you hover over an item and the tooltip appears and then you navigate to another route in angular the tooltip stays on the screen and doesn’t get dismissed. This also happens on the same page if you leave the task, sometimes the tooltip just stays on the screen.
It seems to happen when hovering over a task in the grid, and then moving mouse left off the grid and sometimes the tooltip stays on the screen. As a work around I thought maybe I could just disable the tooltip on the grid by using this from a following forum post:
gantt.attachEvent(“onMouseMove”, function (id, e){
if (e.clientX >= gantt.config.grid_width)
mouse_on_grid = true;
else mouse_on_grid = false;
});
But my clientX does not start at 0 on the far left side. It looks like my chart starts at 312 X position based on the size of the screen width. So I can’t use the above example to hide tooltips on grid.
Hello,
We are aware of that issue. It will be fixed in future versions, but I cannot give you any ETA.
Here is a workaround that you can use:
https://snippet.dhtmlx.com/5/d9e58e3a3
It will work if you move the mouse outside the Gantt container but not outside the browser window or to a different frame like in the snippet.
Also, it seems that you don’t destroy the Gantt instance when you switch to a different tab:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html
I heard that it is a common practice in Angular to destroy Gantt when switching to another tab or page and create a new Gantt instance when switching back.
However, I cannot suggest to you how to implement it in an Angular way.
For the first solution, gantt.$container does not exist in angular. And the second solution only works with the PRO version. Any other options to hide the tooltip when mouse is off the chart?
Hello,
That should depend on the Angular application configuration:
Here is an Angular demo where it works:
https://files.dhtmlx.com/30d/809e9c17294696e33153bc7f0cad4c59/angular8+gantt_6.3.2.zip
If you have a different configuration, the idea is to find the Gantt container and detect its boundaries. Then you can use the gantt.ext.tooltips.tooltip.hide() method to hide the tooltip.
The demo project that you have attached doesn’t have tooltips showing or included. I also tried using gantt.ext.tooltips.tooltip.hide() on ngOnDestroy but it still doesn’t hide the tooltip. It stays stuck on the screen. Is there an example project using angular in a non-pro version of the gantt chart on hiding the tooltips when user leaves the chart area?
Hello,
I sent you that demo project to show that there is the gantt.$container in Angular.
Here is the Angular demo with the GPL version, and there, the tooltip is hidden when you move the mouse outside the Gantt container:
https://files.dhtmlx.com/30d/2a6c3c866c4b5aaac76b189e713d0a5b/angular8+hide-tooltip+gantt_7.0_gpl.zip
Looks like you need to check one more parentNode to get the actual Gantt container position:
var borders = {
left: gantt.$container.parentNode.parentNode.offsetLeft,
right: gantt.$container.parentNode.parentNode.offsetLeft + gantt.$container.clientWidth,
top: gantt.$container.parentNode.parentNode.offsetTop,
bottom: gantt.$container.parentNode.parentNode.offsetTop + gantt.$container.clientHeight
};
I have implemented the same onMouseMove from the demo project that you attached and my tooltip stills gets stuck being displayed sometimes and the tooltip.hide() doesn’t get rid of it.
Hello,
It is hard to suggest what might be wrong as I don’t see your code. Please send me a ready demo project and I will check what might be wrong.
If I switch pages and then return to the gantt page, it will create tooltip multiple times. when i move the mouse outside the Gantt container.the tooltips only hide one.
Hello,
You need to destroy the Gantt instance when you switch to a different page and create a new Gantt instance when you open the page with Gantt:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html
I have the following demo for Angular:
https://files.dhtmlx.com/30d/f71045d1f3b551868dbf709440c3feba/angular9+different_instances_7.0.5_trial.zip
If you use a different framework, I cannot suggest how to do it there. You can use the demo and the snippet to implement the same approach in your framework:
http://snippet.dhtmlx.com/5/180ef01d3