Customize Tooltips

Planningboard surfaces two distinct tooltip types:

Card tooltips — shown when hovering over a work item card on the board
Capacity tooltips — shown when hovering over the capacity bar of a Plan column

Both are configurable through scripting. Card tooltips use the cli.tooltip property in an Item Script; capacity column tooltips use the columnTooltipTemplate configuration option.

Before you begin

You need edit access to the Planningboard widget parameters on the LiveDoc or Wiki page.
Familiarity with the wi and cli scripting objects helps — see Customize Card Content for an introduction to Item Script.
Capacity tooltips require capacity loading to be enabled (capacityLoad = true). See Configure Capacity Tracking.

Customize card tooltips

Card tooltips appear when a user hovers over any work item card on the board. By default, no custom tooltip is set. You define the tooltip content using the cli.tooltip property inside the Item Script. Open the page containing the Planningboard widget in edit mode and open the Advanced Properties section of the widget.

Step 2: Add an Item Script

In the Item Script field, set cli.tooltip to any string. The value supports HTML for richer formatting. Example — show the work item ID and description on hover:

cli.tooltip = "<strong>" + wi.getId() + "</strong><br>" + wi.getDescription();

Example — show a custom field value in the tooltip:

var riskLevel = wi.getValue("riskLevel");
if (riskLevel != null) {
  cli.tooltip = "Risk: " + riskLevel.getName();
} else {
  cli.tooltip = wi.getTitle();
}

Example — show assignee and status together:

cli.tooltip =
  workitem.fields().assignee().render().htmlFor().forFrame() +
  " &mdash; " +
  workitem.fields().status().render().withText(true).htmlFor().forFrame();

Step 3: Save and verify

Save the widget. Hover over any card on the board. The tooltip should appear with the content you defined.

cli.tooltip accepts HTML strings. You can use <br>, <strong>, <em>, and inline styles to format multi-line or highlighted tooltips. Keep the content concise — long tooltip text is hard to read at small sizes.

If cli.tooltip is set to null or an empty string, no tooltip appears. Ensure the field or value you are reading from wi is populated in Polarion before testing — custom field data must exist on the work item for it to appear in the tooltip.

Customize capacity tooltips

Capacity tooltips appear when hovering over the capacity bar of a Plan column in the calendar header. They are only active when capacity loading is enabled on the board. When no custom template is configured, the default tooltip shows aggregate values:

Capacity / Done / Todo / Available

This is the fallback shown automatically when columnTooltipTemplate is not set. The columnTooltipTemplate option accepts either a string template or a JavaScript function that receives column and row objects. You set this through the Config Script in the widget’s Advanced Properties. Example — per-user allocation breakdown:

scheduler.columnTooltipTemplate = function(column, row) {
  var html = "<strong>" + column.text + "</strong><br>";
  if (column.users) {
    column.users.forEach(function(user) {
      var avail = user.available;
      var color = avail < 0 ? "color:red;" : "";
      html +=
        "<span style='" + color + "'>" +
        user.name + ": " +
        avail + " / " + user.allocated + " / " + user.total +
        "</span><br>";
    });
  }
  return html;
};
scheduler.setCurrentView();

The setCurrentView() call is required after programmatically changing the tooltip template — it triggers a re-render so the new template takes effect immediately.

Overallocated users are best indicated with red text (color: red) on negative available values. This is the pattern used in standard Nextedy capacity reports and is immediately recognizable to planning teams.

setCurrentView() must be called after any programmatic change to columnTooltipTemplate. Without it, the old tooltip format remains until the next natural board refresh.

The diagram below shows how the two tooltip types relate to their data sources and configuration points:

Data flow diagram showing hovering a card triggers the Item Script's cli.tooltip through the wi/workitem API to show a card tooltip, while hovering the capacity bar triggers the Config Script's columnTooltipTemplate through column/row objects to show a capacity tooltip

Available scripting objects

Object	Description
`wi`	The current work item (classic Polarion IWorkItem API). Access field values with `wi.getValue("fieldId")`, IDs with `wi.getId()`, titles with `wi.getTitle()`.
`workitem`	The same item through the rendering API. Use `workitem.fields().fieldName().render().htmlFor().forFrame()` to render fields as HTML.
`cli`	Client-side card configuration. Set `cli.tooltip` to a string (HTML supported).
`cli.tooltip`	String. Defines the text shown when hovering over the card. Supports HTML.
`columnTooltipTemplate`	Config Script property. A string template or function returning HTML for the capacity bar tooltip.

Common pitfalls

Capacity tooltips only appear when capacityLoad is enabled in the widget parameters. If the capacity bar is not visible on the board, the tooltip will not appear either. See Configure Capacity Tracking to enable it.

If cli.tooltip is set to a Polarion enum option without calling .getName(), the tooltip displays the raw EnumOption[...] object string instead of the label. Always call .getName() on enum-typed fields:

var status = wi.getValue("status");
cli.tooltip = status != null ? status.getName() : "";

If a custom field has no value on the work item, wi.getValue("fieldId") returns null. Always guard with a null check before using the value in a tooltip string to avoid rendering null as text.

You should now see

Hovering over any work item card shows the tooltip content defined in your Item Script.
Hovering over a Plan column’s capacity bar shows either the default aggregate values or your custom per-user breakdown.
Overallocated users (negative available hours) appear in red in a custom capacity tooltip.

Before you begin

Customize card tooltips

Step 1: Open the widget parameters

Step 2: Add an Item Script

Step 3: Save and verify

Customize capacity tooltips

Default capacity tooltip

Configure a custom capacity tooltip

Tooltip data flow

Available scripting objects

Common pitfalls

You should now see

See also

​Before you begin

​Customize card tooltips

​Step 1: Open the widget parameters

​Step 2: Add an Item Script

​Step 3: Save and verify

​Customize capacity tooltips

​Default capacity tooltip

​Configure a custom capacity tooltip

​Tooltip data flow

​Available scripting objects

​Common pitfalls

​You should now see

​See also

Before you begin

Customize card tooltips

Step 1: Open the widget parameters

Step 2: Add an Item Script

Step 3: Save and verify

Customize capacity tooltips

Default capacity tooltip

Configure a custom capacity tooltip

Tooltip data flow

Available scripting objects

Common pitfalls

You should now see

See also