ABPCMS.Web/lib/chart.js/docs/configuration/tooltip.md

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

# Tooltips

## Tooltip Configuration

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
| `custom` | `Function` | `null` | See [custom tooltip](#custom-tooltips) section.
| `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)
| `itemSort` | `Function` | | Sort tooltip items. [more...](#sort-callback)
| `filter` | `Function` | | Filter tooltip items. [more...](#filter-callback)
| `backgroundColor` | Color | `'rgba(0,0,0,0.8)'` | Background color of the tooltip.
| `titleFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | title font
| `titleFontSize` | `Number` | `12` | Title font size
| `titleFontStyle` | `String` | `'bold'` | Title font style
| `titleFontColor` | Color | `'#fff'` | Title font color
| `titleSpacing` | `Number` | `2` | Spacing to add to top and bottom of each title line.
| `titleMarginBottom` | `Number` | `6` | Margin to add on bottom of title section.
| `bodyFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | body line font
| `bodyFontSize` | `Number` | `12` | Body font size
| `bodyFontStyle` | `String` | `'normal'` | Body font style
| `bodyFontColor` | Color | `'#fff'` | Body font color
| `bodySpacing` | `Number` | `2` | Spacing to add to top and bottom of each tooltip item.
| `footerFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | footer font
| `footerFontSize` | `Number` | `12` | Footer font size
| `footerFontStyle` | `String` | `'bold'` | Footer font style
| `footerFontColor` | Color | `'#fff'` | Footer font color
| `footerSpacing` | `Number` | `2` | Spacing to add to top and bottom of each fotter line.
| `footerMarginTop` | `Number` | `6` | Margin to add before drawing the footer.
| `xPadding` | `Number` | `6` | Padding to add on left and right of tooltip.
| `yPadding` | `Number` | `6` | Padding to add on top and bottom of tooltip.
| `caretPadding` | `Number` | `2` | Extra distance to move the end of the tooltip arrow away from the tooltip point.
| `caretSize` | `Number` | `5` | Size, in px, of the tooltip arrow.
| `cornerRadius` | `Number` | `6` | Radius of tooltip corner curves.
| `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.