Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

Tooltip

Overview

Tooltip is a text box that is hidden by default and can be displayed when a point on a chart is hovered. Tooltip demonstrates the information that each point contains. It may also display some additional information if this is defined by the tooltip settings.

Default Tooltip

By default, the tooltip is being shown when a point on a chart is hovered. To disable them from showing at all set "false" to the enabled() method.

// enable tooltip for all series
chart.tooltip(true);

// disable tooltip
var tooltip = series.tooltip();
tooltip.enabled(false);

Hover each of the series to see the difference.

JsFiddle Playground

Basic settings

NOTE: Tooltips inherit settings. When settings are defined for tooltips of a whole chart, the series' tooltips inherit them and have the same settings. You can override settings for any series.

To change font color and font face use fontColor() and fontFace() methods.

For example, let's set "gold" color to all tooltips and then override it with "green" for one of the series.

// settings
chart.tooltip().fontColor("gold");
series2.tooltip().fontColor("green");

You can see that three series have tooltips with text of gold color and only the one has its tooltips text colored green.

JsFiddle Playground

You can also change tooltip background(), padding(), title() and title separator().

Let's adjust some of these settings to see how it works.

// tooltip padding for all series on a chart
chart.tooltip().padding().left(20);

// background color
chart.tooltip().background().fill("#663399");
series2.tooltip().background().fill("green");

JsFiddle Playground

Formatting title and separator is described the title formatting section.

Display Mode

There are three modes of a tooltip display:

Single

Single tooltip is the default mode. In this mode tooltip displays information only for a single hovered point.

// create column chart plot
var chart = anychart.column();

// get chart tooltip
var tooltip = chart.tooltip();

// set single mode for the tooltip
tooltip.displayMode("single");

Here is a sample of a chart with the tooltip in a single state:

JsFiddle Playground

Union

Union display mode helps to display information about all points with the same argument from all series in one tooltip. This display mode is very useful for comparing series data. Here is a sample of the union tooltip:

// get chart's tooltip
var tooltip = chart.tooltip();

// set display mode for the tooltip
tooltip.displayMode("union");

JsFiddle Playground

Note that if your tooltip is in union mode, setting background color for series separately has no sense as this setting is taken from chart tooltip settings

Separated

Separated display mode shows a single tooltip for all series of the chart at the same time. Set "separated" value as a parameter of displayMode() method:

var tooltip = chart.tooltip();
tooltip.displayMode("separated");

JsFiddle Playground

Note: It might be necessary to manage tooltips position for each series to prevent overlapping. Information on tooltips position can be found in this article in the position section.

Formatting

Title

You can manage tooltip title visual appearance using title() method. You can adjust font's visual settings along with the title's background appearance.

var title = chart.tooltip().title();
title.fontFamily("Calibri");
title.fontDecoration("underline");
title.fontWeight(400);

Note that all title settings defined for a chart are inherited with the series tooltips. Here is a sample with title adjusted for all tooltips on a chart:

JsFiddle Playground

Separator

Separator is a space between tooltip title and content. Use separator() method to adjust this space.

// get tooltip
var tooltip = chart.tooltip();

// disable separator
tooltip.separator(false);

Here is a sample with a title separator disabled.

JsFiddle Playground

Content

You can adjust tooltip content in any way you want. All you have to do is to define custom settings for the tooltip() method.

var tooltip = chart.tooltip();
tooltip.fontSize(13);
tooltip.fontFamily("Calibri");
tooltip.fontStyle("italic");

Here is a sample with the settings from above.

JsFiddle Playground

The default content of a tooltip may vary for different chart types and series, but mainly it displays main points' properties: x and value. Check out the textFormatter() method which is described in Advanced Content Formatting section to find information about changing tooltip content.

Advanced Content Formatting

There are two parts of a tooltip that can hold some information: its title and its body text. This section describes formatting both parts for making your tooltips more customized and informative in a way you need.

Title

For adjusting text of the tooltip title use the titleFormatter() method. This method uses function or string with tokens as a parameter and can help you to format title in any desirable way.

tooltip1.titleFormatter("Manager: {%x}");

JsFiddle Playground

Content

In case you need more complex content formatting there is the textFormatting() method that uses a function or a string token as a parameter. More information on adjusting text can be found in the Text Formatters article.

var tooltip = chart.tooltip();
tooltip.textFormatter(function(){
  /* code of your function */
});

There are several possible ways of formatting the tooltip text: tokens, external functions and functions set as a parameter. It's better to use one of them if possible. Using tokens suit situations when you plan to serialize/deserialize your charts to/from xml or json, external functions are good when you need to do the same complex calculations in several series' (of charts' - in case you work with a dashboard) tooltips and setting function as a parameter is the best option if you need to use unique formatter just once. Remember that series tooltips inherit their settings from chart tooltips, so you need to format the text once for the chart to make all tooltips of this chart look the same.

The following sample demonstrates using tokens for formatting tooltips:

// tooltip settings
var tooltip = chart.tooltip();
tooltip.positionMode("point");
tooltip.textFormatter("Manager: <b>{%x}</b>\nSales volume: <b>${%Value}</b>");

JsFiddle Playground

Use several formatting ways if there are some series on your chart or charts on a dashboard which tooltips need different formatting:

// set the tooltip title and text for the Column Chart
columnChart.tooltip().titleFormatter("{%SeriesName}");
columnChart.tooltip().textFormatter("Department: {%x} \nSum: {%Value}");

// set the tooltip content
seriesSpline.tooltip().textFormatter(function(e){
  var value = (this.value)/1000000;
  return "Total: $" + value + "M";
});

JsFiddle Playground

Note: You can find information on custom tooltips and an example of using a chart as a tooltip in the Interactivity article

Size

Width and height can be also set for all tooltips at once or for the determined series. Use width() and height() to set the corresponding parameters. Don't forget to format the text of the tooltip properly to avoid text overflowing or to set the width corresponding to the maximum text length.

// set tooltip size
columnChart.tooltip().width(200);
columnChart.tooltip().height(80);

JsFiddle Playground

Other Visual Settings

This section describes how to adjust some visual settings that are not essential but can be quite useful.

Prefix and Postfix

Use valuePrefix() and valuePostfix() methods to add symbols, whole words or anything before/after tooltip content. These methods can be used to set dollar symbol as prefix ($) or degrees fahrenheit as postfix (°F).

JsFiddle Playground

Background

Tooltip background appearance can be controlled using background() method. More information about adjusting background can be found in Background tutorial.

var background = chart.tooltip().background();
background.fill("#EEE 0.8");
background.stroke("#888");
background.cornerType("roundInner");
background.corners(5);

That is how tooltip background with the settings from above looks like:

JsFiddle Playground

Out of chart

In case when a tooltip on a chart is too big it may become a problem to demonstrate it within the chart bounds, you can allow the tooltip to be shown out of a chart. Set "true" to allowLeaveChart() to allow tooltips to leave the chart bounds.

// allow tooltips to leave the chart bounds
chart.tooltip().allowLeaveChart(true);

Note that this method can be applied only for all tooltips in a chart, it can't be set for the given series.

JsFiddle Playground

Position

There are several methods for managing tooltips position on the chart. This section contains information on most of these methods.

AnyChart html5 charting library allows to choose should the tooltip be bound to a cursor position, hovered point or to the exact place on the chart plot. Use positionMode() method to choose a target for binding tooltip to. float parameter is the default one for this method and makes tooltip to follow the cursor. Setting point and a parameter binds tooltip to the hovered series point. Use the chart parameter for the positionMode() method to bind tooltips to a place on the chart plot.

var tooltip = chart.tooltip();
tooltip.positionMode("point");

Here is a sample with the tooltip stuck to the hovered point:

JsFiddle Playground

Fixed Tooltip Position

You can bind tooltips to a certain point on the chart plot using chart as a value for positionMode(). The sample of such settings can be found below. You have to manage other tooltip parameters along with positionMode().

You can choose which part of the tooltip should be considered as anchor and used for position managing. anchor() method defines the main part of the tooltip for further positioning.

// tooltip settings
var tooltip = chart.tooltip();

// set tooltip anchor
tooltip.anchor("bottomLeft");

Here is a sample of two series with fixed tooltip position. Tooltip settings are the same except for the the tooltip anchor.

JsFiddle Playground

Along with the main point for tooltip you can set the point to which the tooltip should be bound. Use position() method to set the point for tooltip to be bound to.

var tooltip1 = series1.tooltip();
tooltip1.position("leftCenter");
  
var tooltip2 = series2.tooltip();
tooltip2.position("rightCenter");

That is how the sample with the code from above looks like:

JsFiddle Playground

Note: You can shift tooltips position using offsetX() and offsetY() methods.

Hiding Time

In some cases you may need to display a tooltip for a couple of moments after a point was unhovered. Use hideDelay() method to set timer to display tooltip a bit longer.

// tooltip settings
var tooltip = series.tooltip();

// set delay time in milliseconds
tooltip.hideDelay(1000);

Themes

Tooltips can be adjusted using AnyChart Themes. Themes makes it possible to set the same settings for several charts. Here is a sample of adjusting tooltips using themes:

var themeSettings = {
  "column":{
    // set tooltip display mode
    "tooltip": {
      "displayMode": "point"
    },
    // series hub
    "defaultSeriesSettings":{
      // series settings
      "column":{
        // tooltip settings
        "tooltip": {
          "anchor": "bottomCenter",
          "position": "topCenter",
          "offsetX": 0,
          "hideDelay": 3000,
          "fontFamily": "Menlo",
          "fontSize": 14
        }
      }
    }
  }
};

Settings for the tooltip in the sample below were applied using themes. Click "launch in playground" to see how settings for tooltip can be applied using AnyChart themes.

JsFiddle Playground