Add tooltip on addTaskLayer

Gantt
#1

Hello,
It’s possible to add tooltip on addTaskLayer? (Using dhtmlxgantt tooltip ext)

gantt.addTaskLayer(function draw(task) {
var el = document.createElement(‘div’);
var sizes = gantt.getTaskPosition(task, task.date);
el.style.left = sizes.left + ‘px’;
el.style.top = sizes.top + ‘px’;
el.setAttribute(‘title’, gantt.templates.task_date(task.date)); // Here add tooltip, but want to use dhtmlxgantt tooltip
return el;
}
return false;
});

#2

Update 2019-08-06

Since this question is fairly popular, here is the update.
Tooltips has been updated in v6.1 and now it’s possible to add tooltips to custom elements and task layers using the public API:

gantt.attachEvent("onGanttReady", function () {
  gantt.templates.tooltip_text = function(start, end, task){
    return "<b>Task:</b> " + task.text + "<br/><b>Start date:</b> "
      + gantt.templates.tooltip_date_format(start) 
      + "<br/><b>End date:</b> " 
      + gantt.templates.tooltip_date_format(end);
  };
 
  var tooltips = gantt.ext.tooltips;
  tooltips.tooltipFor({
    selector: ".deadline",
    html: function (event, node) {
      var taskId = node.getAttribute(gantt.config.task_attribute);
      var task = gantt.getTask(taskId);
      return "<b>Task:</b> " + task.text + "<br/><b>Deadline:</b> "
         + gantt.templates.tooltip_date_format(task.deadline) ;
    }
  });
});

snippet: http://docs.dhtmlx.com/gantt/snippet/8712a3d1
docs: https://docs.dhtmlx.com/gantt/desktop__tooltips.html
sample: https://docs.dhtmlx.com/gantt/samples/02_extensions/22_tooltip_api.html

Previous reply:

Hi,
The simplest approach is to add task id attribute to the custom element:
el.setAttribute(gantt.config.task_attribute, task.id);
If you do so, it will trigger the same onhover and onclick handlers as the task bar, i.e. your custom element will show the same tooltip on mouseover and you’ll be able to open lightbox by double clicking the element.
Here is an example docs.dhtmlx.com/gantt/snippet/503a260e

But it becomes more difficult if you want different tooltip content for custom elements. In that case you’ll probably need to override some internal methods in order to pass an additional info into tooltip_text template, e.g. like shown in this example docs.dhtmlx.com/gantt/snippet/e6e447fe

1 Like
#3

Thanx, Aliaksandr.

#4

In your example I see a problem that I also having and I’m not finding a solution.

When you try to add a new task deadline dropdowns are gone and always is set to null without no possibility to change it. Any idea?

#5

What are happeging with dates? My previous post is from minutes before.

#6

If quote a message appear with a fake datetime.

#7

How to show tooltip for task grid column(particular to one column) , I am using 4.1.19 version of library.

I rendered cell content with HTML string and I need to show some custom tooltip on the clock icon
image

#8

Hello Vittal,
In the 4.1 version, there is a simple tooltip API. The functionality of adding tooltips for custom HTML elements was added in the 6.1 version:
https://docs.dhtmlx.com/gantt/whatsnew.html#61
https://docs.dhtmlx.com/gantt/desktop__tooltips.html#tooltipsfordifferentelements

So, you can use the basic popup message to show something like the tooltip:
https://docs.dhtmlx.com/gantt/desktop__message_boxes.html
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/5/f3d490f03

If you need something more similar to the tooltip, you need to implement a custom solution.