Customize Tooltips

Tooltips in Gantt charts offer a quick and efficient way to display additional information about tasks. They appear by hovering over a work item in the chart:

You can now customize these tooltips by adding fields for example Remaining Estimate and Description, depending on your needs. These customizations will be added in the Advanced section of Gantt Parameters.

How to customize the tooltips

Once you apply these scripts, the tooltip will display the remaining estimate in hours and description if it's filled in.

1. Add this snippet to the Gantt Config Script to include the fields:

var oldTooltip = gantt.templates.tooltip_text;
gantt.templates.tooltip_text =  (start, end, task) => {
    var tt =  oldTooltip(start,end,task);
 
    return tt  + (task.fields.remainingEstimate?"<br/>Remaining Estimate: <b>"+task.fields.remainingEstimate+"h"+"</b>":"")  +
            "<br>Description:<b>" + task.fields.description + "</b>";  
}

var remainingEstimate =  wi.getRemainingEstimate()!=null ? wi.getRemainingEstimate().getHours() : 0  
var remainingEstimateString = remainingEstimate.toString();
if(remainingEstimateString!=""){
     task.getFields().put("remainingEstimate", remainingEstimateString);
    } 

var description = wi.getDescription()?.convertToPlainText().getContent();

  
if (description != null) {
    task.getFields().put("description", description.toString());
} else { task.getFields().put("description", ""); }