Customize Tooltips

Modified on Fri, 17 Apr at 3:29 PM

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>";  
}

2. Insert the following script into the Item Script section:

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", ""); }

Example of a customized tooltip configuration:

Keeping custom and default tooltip fields together

When you customize tooltips by appending additional fields (as shown above), you may notice that legend information — such as "unscheduled" badges or child range control indicators — can appear between the default built-in fields and your custom fields. This splits the tooltip into two disconnected groups, making it harder to read.

Before (split behavior): The tooltip displays built-in fields (Title, Start, End, Duration), then a legend marker (e.g., the unscheduled or child range badge), and finally your custom fields (Remaining Estimate, Description) — visually separated from the rest.

After (unified behavior): All tooltip fields — both built-in and custom — appear together as one cohesive block, with any legend information rendered separately at the bottom.

How to fix this

The issue occurs because the default tooltip_text template returns the built-in fields, and legend markup gets appended by the Gantt engine before your custom content is concatenated. To ensure all fields stay together, modify the Gantt Config Script so that your custom fields are inserted directly into the tooltip body rather than simply appended after it.

Replace the original Gantt Config Script with:

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

The Item Script remains the same as described in the section above.

What changed

The key difference is that instead of blindly appending custom fields at the end of the tooltip string, the script now checks whether legend markup exists in the tooltip HTML. If it does, custom fields are inserted just before the legend block, keeping all data fields grouped together. If there is no legend (the common case), the behavior is identical to the original approach.

When does the legend appear?

Legend markers show up on tasks that have special scheduling states, for example: unscheduled work items (no start/end date), tasks with child range control enabled, or tasks with scheduling conflicts. If your project doesn't use these features, you may never see the split — but it's good practice to use the updated script pattern regardless, so tooltips remain clean as your project grows.

For any assistance, please don’t hesitate to reach out by submitting a ticket here.