The tooltip configuration is passed into the `options.tooltips` namespace. The global options for the chart tooltips is defined in `Chart.defaults.global.tooltips`.
| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `enabled` | `Boolean` | `true` | Are tooltips enabled
| `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. [more...](../general/interactions/modes.md#interaction-modes).
| `intersect` | `Boolean` | `true` | 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.
| `position` | `String` | `'average'` | The mode for positioning the tooltip. [more...](#position-modes)
| `callbacks` | `Object` | | See the [callbacks section](#tooltip-callbacks)
| `multiKeyBackground` | Color | `'#fff'` | Color to draw behind the colored boxes when multiple items are in the tooltip
| `displayColors` | `Boolean` | `true` | if true, color boxes are shown in the tooltip
| `borderColor` | Color | `'rgba(0,0,0,0)'` | Color of the border
| `borderWidth` | `Number` | `0` | Size of the border
### Position Modes
Possible modes are:
* 'average'
* 'nearest'
'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.
### Sort Callback
Allows sorting of [tooltip items](#chart-configuration-tooltip-item-interface). 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.
### Filter Callback
Allows filtering of [tooltip items](#chart-configuration-tooltip-item-interface). 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 second parameter that is the data object passed to the chart.
## Tooltip Callbacks
The tooltip label configuration is nested below the tooltip configuration using the `callbacks` key. The tooltip has the following callbacks for providing text. For all functions, 'this' will be the tooltip object created from the Chart.Tooltip constructor.
All functions are called with the same arguments: a [tooltip item](#chart-configuration-tooltip-item-interface) and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.
| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeTitle` | `Array[tooltipItem], data` | Returns the text to render before the title.
| `title` | `Array[tooltipItem], data` | Returns text to render as the title of the tooltip.
| `afterTitle` | `Array[tooltipItem], data` | Returns text to render after the title.
| `beforeBody` | `Array[tooltipItem], data` | Returns text to render before the body section.
| `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip.
| `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
The tooltip items passed to the tooltip callbacks implement the following interface.
```javascript
{
// X Value of the tooltip as a string
xLabel: String,
// Y value of the tooltip as a string
yLabel: String,
// Index of the dataset the item comes from
datasetIndex: Number,
// Index of this data item in the dataset
index: Number,
// X position of matching point
x: Number,
// Y position of matching point
y: Number,
}
```
## External (Custom) Tooltips
Custom 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 oncanvas one. You can enable custom tooltips in the global or chart configuration like so:
```javascript
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
custom: function(tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');