| `intersect` | `boolean` | `interaction.intersect` | If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times.
| `usePointStyle` | `boolean` | `false` | Use the corresponding point style (from dataset options) instead of color boxes, ex: star, triangle etc. (size is based on the minimum value between boxWidth and boxHeight).
| `textDirection` | `string` | canvas' default | This will force the text direction `'rtl' or 'ltr` on the canvas for rendering the tooltips, regardless of the css specified on the canvas
`'average'` mode will place the tooltip at the average position of the items displayed in the tooltip. `'nearest'` will place the tooltip at the position of the element closest to the event position.
New modes can be defined by adding functions to the `Chart.Tooltip.positioners` map.
The `titleAlign`, `bodyAlign` and `footerAlign` options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.
*`'left'` (default)
*`'right'`
*`'center'`
These options are only applied to text lines. Color boxes are always aligned to the left edge.
Allows sorting of [tooltip items](#tooltip-item-context). Must implement at minimum a function that can be passed to [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). This function can also accept a third parameter that is the data object passed to the chart.
Allows filtering of [tooltip items](#tooltip-item-context). Must implement at minimum a function that can be passed to [Array.prototype.filter](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). This function can also accept a fourth parameter that is the data object passed to the chart.
Namespace: `options.plugins.tooltip.callbacks`, the tooltip has the following callbacks for providing text. For all functions, `this` will be the tooltip object created from the `Tooltip` constructor.
All functions are called with the same arguments: a [tooltip item context](#tooltip-item-context). All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
| `beforeTitle` | `TooltipItem[], object` | | Returns the text to render before the title.
| `title` | `TooltipItem[], object` | | Returns text to render as the title of the tooltip.
| `afterTitle` | `TooltipItem[], object` | | Returns text to render after the title.
| `beforeBody` | `TooltipItem[], object` | | Returns text to render before the body section.
| `beforeLabel` | `TooltipItem, object` | Yes | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `TooltipItem, object` | Yes | Returns text to render for an individual item in the tooltip. [more...](#label-callback)
| `labelColor` | `TooltipItem, Chart` | Yes | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
| `labelTextColor` | `TooltipItem, Chart` | Yes | Returns the colors for the text of the label for the tooltip item.
| `labelPointStyle` | `TooltipItem, Chart` | Yes | Returns the point style to use instead of color boxes if usePointStyle is true (object with values `pointStyle` and `rotation`). Default implementation uses the point style from the dataset points. [more...](#label-point-style-callback)
| `afterLabel` | `TooltipItem, object` | Yes | Returns text to render after an individual label.
| `afterBody` | `TooltipItem[], object` | | Returns text to render after the body section.
| `beforeFooter` | `TooltipItem[], object` | | Returns text to render before the footer section.
| `footer` | `TooltipItem[], object` | | Returns text to render as the footer of the tooltip.
| `afterFooter` | `TooltipItem[], object` | | Text to render after the footer section.
The `label` callback can change the text that displays for a given data point. A common example to show a unit. The example below puts a `'$'` before every row.
External tooltips allow you to hook into the tooltip rendering process so that you can render the tooltip in your own custom way. Generally this is used to create an HTML tooltip instead of an on-canvas tooltip. The `external` option takes a function which is passed a context parameter containing the `chart` and `tooltip`. You can enable external tooltips in the global or chart configuration like so: