Tooltip shows in both grid and timeline — how to restrict it to timeline only?

Gantt Vue.js Gantt
#1

Hi everyone,

I’m working with the latest version of dhtmlxGantt and have enabled the tooltip plugin. My issue is that the tooltip appears both when hovering over the left grid area and the right timeline area.

My requirement is:

  • Tooltip should only appear when hovering over tasks in the timeline.
  • No tooltip should be shown when the mouse is over the grid cells.

What I’ve tried so far:

  1. Adding a fourth parameter ‘(start, end, task, e)’ in ‘gantt.templates.tooltip_text’ to check the event target. But in the current version ‘e’ is always ‘undefined’.
  2. CSS rules like:

css

.gantt_grid_data .gantt_tooltip {
    display: none !important;
}

But since the tooltip element is rendered globally, this doesn’t work.

So my question is:

  • Is there an official way to distinguish between grid and timeline when using the tooltip plugin?
  • Or is there a recommended workaround to restrict tooltip display to the timeline only?

Thanks in advance for any guidance!

#2

Hello Yard,
You can customize the tooltip behavior by using the tooltipFor method and returning an empty content for the .gantt_row selector:
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#customizationoftooltipbehavior

Here is an example of how it can be implemented:

#3

Thanks for your help :pray:. I found that ‘gantt.ext.tooltips.tooltipFor’ is only available in the Pro version of dhtmlxGantt. I’m currently using the free Community edition, so this API isn’t available in my setup.

#4

Hello Yard,
The tooltip extension is not a Pro feature. It is available in all Gantt versions:
https://docs.dhtmlx.com/gantt/desktop__editions_comparison.html#:~:text=✔-,Tooltips,-✔

If you switch the Gantt version in the snippet tool, you can see that the gantt.ext.tooltips.tooltipFor property is available in the Standard (GPL) version:

1564×574 133 KB

However, that method was added in the 6.1 version:
https://docs.dhtmlx.com/gantt/whatsnew.html#:~:text=Ability%20to%20create%20tooltips%20for%20all%20the%20elements%20of%20dhtmlxGantt

So, if your Gantt version is older, it won’t work, but this is not related to the Pro version. And in this case, you really need to rely on the tooltip_text template.
Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/eh2gevy2