emphasized text
Hello,
I suppose, you are not using the Gantt Instance approach.
If you use Gantt in Angular, React, Vue, or other framework related to node.js, it is expected to use the Gantt Instance approach.
When you open a page/tab/view with Gantt, you need to create a new Gantt instance. When you switch to a different page/tab/view, you need to destroy the Gantt instance:
https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html#destructorofganttanddataprocessorinstances
When Gantt is destroyed, the tooltip and popups are removed.
You can check how it works in the following demos:
https://files.dhtmlx.com/30d/f9efce5ac2b5298cb456fff8279fc78d/angular16+GanttInstance.zip
https://files.dhtmlx.com/30d/4f25d33cbc4b19057f40a028577f9410/vue3+gantt-instance+trial_7.1.12.zip
Alternatively, you need to manually reset everything by yourself. And that includes manually removing the popups and tooltips.
The following article covers the known issues:
https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html
Here are the demos where the tooltips and popups are not hidden:
https://files.dhtmlx.com/30d/284f415f444ae1ea1fdaf33314acae18/angular16+gantt_GPL.zip
https://files.dhtmlx.com/30d/ba3be5b2fbffd3484af6c2da06ba653e/vue3+gantt.zip
You will need to add this code when you switch to another tab to remove the DOM elements of the tooltips and popups:
const popups = document.querySelectorAll(".gantt-info");
popups.forEach(function(el){
el.remove()
})
const tooltips = document.querySelectorAll(".gantt_tooltip");
tooltips.forEach(function(el){
el.remove()
})
Here are the demos where it is fixed:
https://files.dhtmlx.com/30d/70dabbe7a7b74a5fe8c8aaa1488ea0ee/angular16+gantt_GPL.zip
https://files.dhtmlx.com/30d/c0a7cdde5ff4139e785733d9bfdbc9fb/vue3+gantt-gpl.zip