> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Gantt Tooltips

> Modify the content and behavior of hover tooltips on task bars, toolbar buttons, markers, and footer elements in the Nextedy GANTT chart.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Default Tooltip Behavior

The Gantt chart provides several types of tooltips out of the box:

| Element                 | Tooltip Content                                                                | Trigger                                  |
| ----------------------- | ------------------------------------------------------------------------------ | ---------------------------------------- |
| Task bars               | Task title, dates, assignee, duration                                          | Hover over a task bar                    |
| Toolbar buttons         | Action description                                                             | Hover over a toolbar button              |
| Milestone markers       | Marker name and due date (format: `Milestone: <name>`, `Due Date: YYYY-MM-DD`) | Hover over a milestone marker line       |
| Today marker            | Current date (format: `Today: YYYY-MM-DD`)                                     | Hover over the today marker line         |
| Grid column headers     | Full column name                                                               | Hover over a truncated column header     |
| Footer filter indicator | Active filter description (resource, date range, text)                         | Hover over the filter icon in the footer |

<Steps>
  <Step title="Add Custom Fields to Task Tooltips">
    Customizing task bar tooltips requires two scripts working together: an **Item Script** to populate the data and a **Gantt Config Script** to render it.

    First, add the data fields in **Widget Properties > Advanced > Item Script**:

    ```javascript theme={null}
    // Extract fields from the Polarion work item
    task.getFields().put("description", wi.getDescription() ? wi.getDescription().getContent() : "");
    task.getFields().put("remainingEstimate", wi.getValue("remainingEstimate") ? wi.getValue("remainingEstimate").toString() : "N/A");
    ```

    Then, override the tooltip template in **Widget Properties > Advanced > Gantt Config Script**:

    ```javascript theme={null}
    gantt.templates.tooltip_text = function(start, end, task) {
      return "<b>" + task.text + "</b>" +
        "<br/>Start: " + gantt.templates.tooltip_date_format(start) +
        "<br/>End: " + gantt.templates.tooltip_date_format(end) +
        "<br/>Remaining: " + task.fields.remainingEstimate;
    };
    ```

    <Warning title="Both Scripts Required">
      The Item Script runs on the server and populates task field data. The Gantt Config Script runs on the client and renders the tooltip template. If you only configure the template without populating the fields, the tooltip displays empty or undefined values.
    </Warning>
  </Step>

  <Step title="Customize Milestone Marker Tooltips">
    Milestone marker tooltips display automatically when you hover over a marker line on the timeline. The tooltip shows the marker name and due date in the following format:

    ```
    Milestone: Release v2.0
    Due Date: 2025-06-15
    ```

    The marker tooltip content is derived from the `title` and `date` properties of each marker. To customize marker content, configure your markers with descriptive titles. See [Create and Configure Markers](/gantt/guides/visualization/markers) for details.
  </Step>

  <Step title="Understand Footer Tooltips">
    The Gantt footer displays a row count indicator (e.g., `Gantt Rows: 4 of 10`). When filters are active, a filter icon appears. Hovering over this icon shows a tooltip summarizing all active filters:

    * **Closed items filter**: How many tasks are hidden because they are resolved
    * **Date range filter**: The active start/end date range limiting visible tasks
    * **Text filter**: The current search string and how many tasks it hides
    * **Resource filter**: The active resource name and hidden task count
    * **Marker filter**: Which marker is scoping the visible date range

    These tooltips update dynamically as you apply or remove filters.

    <Tip title="Version Compatibility">
      Tooltip script customization works best when your Gantt version matches your Polarion version. If tooltip scripts produce unexpected results after an upgrade, verify that both components are on compatible versions.
    </Tip>
  </Step>
</Steps>

## Disabling Tooltips

To disable task bar tooltips entirely, add the following to the **Gantt Config Script**:

```javascript theme={null}
gantt.config.show_quick_info = false;
```

<Info title="Verify in application">
  The exact property name to disable tooltips may vary by version. Test in your environment after applying the change.
</Info>

## Verification

You should now see customized tooltip content when hovering over task bars in the Gantt chart. The tooltip displays the fields you configured in the Item Script, formatted according to your Gantt Config Script template. Milestone markers show their name and due date, and the footer tooltip describes any active filters.

## See Also

* [Write Item Scripts](/gantt/guides/scripting/item-script-basics)
* [Write Gantt Config Scripts](/gantt/guides/scripting/gantt-config-script)
* [Create and Configure Markers](/gantt/guides/visualization/markers)
* [Use Gantt Filters](/gantt/guides/filtering/gantt-filters)
* [Filter by Resource and Allocation](/gantt/guides/filtering/filter-by-resource)

<LastReviewed date="2026-07-07" />