Tooltips

• Overview
• Tokens
  • Project Tokens
  • Resource Tokens
• Formatting Functions
  • Project Fields
  • Resource Fields

Overview

Tooltips are text boxes displayed when data grid or timeline rows are hovered over. They are defined as instances of the anychart.core.ui.Tooltip class.

To access tooltips of the data grid, combine the dataGrid() method with tooltip().

By default, tooltips are enabled. To disable or enable them, pass false / true either directly to tooltip() or to the enabled() method of tooltips:

chart.dataGrid().tooltip(false);

chart.dataGrid().tooltip.enabled(false);

To configure tooltips, use other methods of anychart.core.ui.Tooltip - for example, fontColor(), fontWeight(), fontSize(), etc. The format() method, combined with text formatters, allows setting the text format - read the sections below to learn more.

Note 1: To learn more about formatting dates, see Date and Time Formats: format().

Note 2: The tooltips that are shown on the timeline are configured independently from the data grid tooltips. See Timeline: Tooltips.

Tokens

To format the text of tooltips, combine the format() method with tokens.

Please keep in mind that in addition to default tokens you can always use a custom token corresponding to a custom field in your data.

Also, if you need to enable HTML in tokens, pass true to useHtml().

Project Tokens

For the Project Gantt chart, the following tokens are available:

• {%id}
• {%name}
• {%actualStart}
• {%actualEnd}
• {%baselineStart}
• {%baselineEnd}
• {%progress}
• {%linearIndex}

In the sample below, there is a Project chart with tooltips showing the start and end dates of elements, the progress, and the content of a custom field manager:

// configure tooltips of the data grid
chart.dataGrid().tooltip().useHtml(true);    
chart.dataGrid().tooltip().format(
  "<span style='font-weight:600;font-size:12pt'>" +
  "{%actualStart}{dateTimeFormat:dd MMM} - " +
  "{%actualEnd}{dateTimeFormat:dd MMM}</span><br><br>" +
  "Progress: {%progress}<br>" +
  "Manager: {%manager}"
);

Resource Tokens

The Resource Gantt chart supports these tokens:

• {%id}
• {%name}
• {%start}
• {%end}
• {%linearIndex}

In the following sample, tokens, including a custom one (disc_space), are used to format the text of tooltips of a Resource chart:

// configure tooltips of the data grid
chart.dataGrid().tooltip().useHtml(true);    
chart.dataGrid().tooltip().format(
  "<span style='font-weight:600;font-size:12pt'>" +
  "{%start}{dateTimeFormat:dd MMM} - " +
  "{%end}{dateTimeFormat:dd MMM}</span><br><br>" +
  "Disc Space: {%disc_space}"
);

Formatting Functions

You can configure the text of tooltips by combining the format() method with formatting functions.

In these functions, a number of default context fields is available. Also, you can use getData() to refer to a custom field in your data and methods of the tree data model to perform operations on data.

If you need to enable HTML in formatting functions, pass true to useHtml().

Project Fields

For the Project Gantt chart, the following fields are available in formatting functions:

• id
• name
• actualStart
• actualEnd
• baselineStart
• baselineEnd
• progress
• linearIndex

In the sample below, a formatting function is used to display different tooltips for different types of tasks. Also, in all tooltips the content of a custom data field manager is shown.

A special context field item and the numChildren() method of the Tree Data Model are used to get the number of the current data item's children and distinguish regular tasks from parent ones. To distinguish regular tasks from milestones, the duration of tasks is calculated.

// configure tooltips of the data grid

chart.dataGrid().tooltip().useHtml(true);

chart.dataGrid().tooltip().format(function() {

  var numChildren = this.item.numChildren();
  var duration = (this.actualEnd - this.actualStart) / 1000 / 3600 / 24;      
  var startDate = anychart.format.dateTime(this.actualStart, "dd MMM");
  var endDate = anychart.format.dateTime(this.actualEnd, "dd MMM");
  var progress = this.progress * 100 + "%";
  var manager = this.getData("manager");

  var parentText = "<span style='font-weight:600;font-size:12pt'>" + 
                   startDate + " - " + endDate + "</span><br><br>" +
                   "Duration: " + duration + " days<br>" +
                   "Number of Tasks: " + numChildren + "<br><br>" +                       
                   "Manager: " + manager;

  var milestoneText = "<span style='font-weight:600;font-size:12pt'>" +
                      startDate + "</span><br><br>" +
                      "Manager: " + manager;

  var taskText = "<span style='font-weight:600;font-size:12pt'>" + 
                 startDate + " - " + endDate + "</span><br><br>" +
                 "Duration: " + duration + " days<br>" +
                 "Progress: " + progress + "<br><br>" +
                 "Manager: " + manager;

  // identify the task type and display the corresponding text
  if (numChildren > 0) {
    return parentText;
  } else {
    if (duration == 0) {
      return milestoneText;
    } else {
      return taskText;
    }
  }

});

Resource Fields

Here are the fields supported by the Resource Gantt chart:

• id
• name
• start
• end
• linearIndex

In this sample, a formatting function is used to display different tooltips for parent and child resources. For example, the content of a custom field disc_space is shown only for child resources.

A special context field item and the numChildren() method of the Tree Data Model are used to get the number of the current data item's children and distinguish regular resources from parent ones:

// configure tooltips of the data grid

chart.dataGrid().tooltip().useHtml(true);

chart.dataGrid().tooltip().format(function() {

  var numChildren = this.item.numChildren();
  var duration = (this.end - this.start) / 1000 / 3600 / 24;
  var startDate = anychart.format.dateTime(this.start, "dd MMM");
  var endDate = anychart.format.dateTime(this.end, "dd MMM");
  var discSpace = this.getData("disc_space");

  var parentText = "Number of Servers: " + numChildren;

  var childText = "<span style='font-weight:600;font-size:12pt'>" + 
                 startDate + " - " + endDate + "</span><br><br>" +
                 "Duration: " + duration + " days<br>" +
                 "Disc Space: " + discSpace;

  // identify the resource type and display the corresponding text
  if (numChildren > 0) {
    return parentText;
  } else {
    return childText;
  }

});