Tooltip configuration

Tooltips are the main feature used by Chart.js to reveal quantitative details about data. While some context comes from the grid, the only way to natively display data right next to the data point is using a tooltip. Of course, you can label the value points as we saw in the previous chapter, but that requires extensions or plugins, and may clutter your chart if used in excess. Chart.js visualizations rely on interactivity to show details. In this section, we will learn how to configure the way these details are displayed.

Tooltips can be configured for each chart using the tooltips key in the options object. They can also be configured for all charts using Chart.defaults.global.tooltips. The properties of these objects that you can configure are listed in the following table:

Object	Value	Description
`titleSpacing`	Number	Space before and after each title line. Default is `2`.
`bodySpacing`	Number	Space before and after each tooltip item. Default is `2`.
`footerSpacing`	Number	Space before and after each footer line. Default is `2`.
`titleMarginBottom`	Number	Margin after the `title` in pixels. Default is `6`.
`footerMarginTop`	Number	Margin before the `footer` in pixels. Default is `6`.
`xPadding`	Number	Vertical padding in pixels. Default is `6`.
`yPadding`	Number	Horizontal padding in pixels. Default is `6`.
`enabled`	`true` or `false`	Turns tooltips on or off. Default is `true`.
`intersect`	`true` or `false`	If `true`, the tooltip interaction mode will only be applied when the cursor hovers exactly over the point (inside the `pointHitRadius`). If `false`, it will be applied at all times. Global default is `true`, but changes depending on the type of chart.
`mode`	`nearest`, `index`, `dataset`, `x`, `y`. Deprecated values are `label` (same as `index`), and `single` (behaves like `nearest` when intersect: `true`).	Selects the tooltip interaction mode. `nearest` displays the value of the nearest point (includes one item per tooltip), `index` displays values of all the points with the same index (will include an item for each `dataset` in the same tooltip), `dataset` will display the entire `dataset` in a tooltip. Two other modes are available for cartesian scales only: `x` will include in the tooltip all items that share the same `x` coordinate value, and `y` will include all items that share the same `y` coordinate value. `index` mode, which in Cartesian scales defaults to the `x` indexes, can also be set for the `y` indexes by adding the property `axis`: `y`. The global default is `nearest` but it changes depending on the type of chart.
`position`	`average`, `nearest`, or a custom position	Defines where the tooltip is positioned in relation to the value point. The default is `average`. (You can define your own custom position creating an entry in the `Chart.Tooltip.positioners` map that returns an object with x and y coordinates.)
`titleFontFamily`, `titleFontStyle`, `titleFontColor`, `titleFontSize`	`String` and `Number`	Font attributes for `title` (which is configured using `callbacks`).
`bodyFontFamily`, `bodyFontStyle`, `bodyFontColor`, `bodyFontSize`	`String` and `Number`	Font attributes for `body` (which is configured using `callbacks`).
`footerFontFamily`, `footerFontStyle`, `footerFontColor`, `footerFontSize`	`String` and `Number`	Font attributes for `footer` (which is configured using `callbacks`).
`caretSize`	`Number`	Size in pixels of the tooltip arrow. Default is `5`.
`caretPadding`	`Number`	Distance of the arrow tip from the tooltip position (example: the value point). Default is `2`.
`cornerRadius`	`Number`	The radius of the rounded rectangle in pixels. Default is `6`.
`backgroundColor`	CSS color	The background color of the tooltip. Default is `rgba(0,0,0,0.8)`.
`multiKeyBackground`	CSS color	The background of the colored box (won't be visible if the `dataset` color is opaque). Default is `#fff`.
`borderColor`	CSS color	The border color of the tooltip. Default is `rgba(0,0,0,0)`.
`borderWidth`	Number	The border width of the tooltip. Default is 0.
`displayColors`	`true` or `false`	If `false`, hides color boxes. Default is `true`.
`callbacks`	Object	An object containing several callback functions. See the Tooltip callbacks section on tooltip `callbacks` in this chapter.

Static properties for tooltips (used in the options.tooltips key)

In the following example, several default style properties were changed for the tooltips of a chart instance. Each tooltip will have a gray background, a yellow 3-pixel border, a pink 16-pixel title, an italic body, and a 10-pixel arrow, distant 10 pixels from the data point:

const data = {
   labels: ["One", "Two", "Three", "Four"],
   datasets: [{label:'Dataset 1',… },{label:'Dataset 2',…}, 
   {label:'Dataset 3',…}]
};
new Chart('chart', {type: 'line', data: data,
    options: {
        legend: { display: false },
        tooltips: {
            mode: 'index',
            titleFontSize: 16,
            titleFontColor: 'pink',
            bodyFontStyle: 'italic',
            titleSpacing: 10,
            caretSize: 10,
            caretPadding: 10,
            backgroundColor: 'rgba(10,10,60,.5)',
            borderColor: 'yellow',
            borderWidth: 3,
        },
    }
});

The full code is in Tooltips/tooltip-1.html. The result is as follows:

Tooltip with modified border color and width, background color, title font size and color, body font style,
caret arrow size, and padding (distance from value point). Code: Tooltips/tooltip-1.html.

Table of Contents for Tooltip configuration

Create new playlist

Sign In

Sign Up

Table of Contents for
Tooltip configuration