Interface: TooltipOptions | Chart.js
Description: Open source HTML5 Charts for your website

# # Interface: TooltipOptions<TType>

## # Type parameters

Name | Type
--- | ---
`TType` | extends `ChartType` = `ChartType`

## # Hierarchy

- `CoreInteractionOptions`

  ↳ `TooltipOptions`

## # Properties

### # animation

• animation: `AnimationSpec`<`TType`>

#### # Defined in

index.esm.d.ts:2784
(opens new window)

### # animations

• animations: `AnimationsSpec`<`TType`>

#### # Defined in

index.esm.d.ts:2785
(opens new window)

### # axis

• axis: `InteractionAxis`

Defines which directions are used in calculating distances. Defaults to 'x' for 'index' mode and 'xy' in dataset and 'nearest' modes.

#### # Inherited from

CoreInteractionOptions.axis

#### # Defined in

index.esm.d.ts:1439
(opens new window)

### # backgroundColor

• backgroundColor: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Background color of the tooltip.

`default` 'rgba(0, 0, 0, 0.8)'

#### # Defined in

index.esm.d.ts:2642
(opens new window)

### # bodyAlign

• bodyAlign: `Scriptable`<`TextAlign`, `ScriptableTooltipContext`<`TType`>>

Horizontal alignment of the body text lines.

`default` 'left'

#### # Defined in

index.esm.d.ts:2692
(opens new window)

### # bodyColor

• bodyColor: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Color of body

`default` '#fff'

#### # Defined in

index.esm.d.ts:2682
(opens new window)

### # bodyFont

• bodyFont: `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableTooltipContext`<`TType`>>

See Fonts.

`default` {}

#### # Defined in

index.esm.d.ts:2687
(opens new window)

### # bodySpacing

• bodySpacing: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Spacing to add to top and bottom of each tooltip item.

`default` 2

#### # Defined in

index.esm.d.ts:2677
(opens new window)

### # borderColor

• borderColor: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Color of the border.

`default` 'rgba(0, 0, 0, 0)'

#### # Defined in

index.esm.d.ts:2767
(opens new window)

### # borderWidth

• borderWidth: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Size of the border.

`default` 0

#### # Defined in

index.esm.d.ts:2772
(opens new window)

### # boxHeight

• boxHeight: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Height of the color box if displayColors is true.

`default` bodyFont.size

#### # Defined in

index.esm.d.ts:2757
(opens new window)

### # boxPadding

• boxPadding: `number`

Padding between the color box and the text.

`default` 1

#### # Defined in

index.esm.d.ts:2647
(opens new window)

### # boxWidth

• boxWidth: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Width of the color box if displayColors is true.

`default` bodyFont.size

#### # Defined in

index.esm.d.ts:2752
(opens new window)

### # callbacks

• callbacks: `TooltipCallbacks`<`TType`, `TooltipModel`<`TType`>, `TooltipItem`<`TType`>>

#### # Defined in

index.esm.d.ts:2786
(opens new window)

### # caretPadding

• caretPadding: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Extra distance to move the end of the tooltip arrow away from the tooltip point.

`default` 2

#### # Defined in

index.esm.d.ts:2727
(opens new window)

### # caretSize

• caretSize: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Size, in px, of the tooltip arrow.

`default` 5

#### # Defined in

index.esm.d.ts:2732
(opens new window)

### # cornerRadius

• cornerRadius: `Scriptable`<`number` | `BorderRadius`, `ScriptableTooltipContext`<`TType`>>

Radius of tooltip corner curves.

`default` 6

#### # Defined in

index.esm.d.ts:2737
(opens new window)

### # displayColors

• displayColors: `Scriptable`<`boolean`, `ScriptableTooltipContext`<`TType`>>

If true, color boxes are shown in the tooltip.

`default` true

#### # Defined in

index.esm.d.ts:2747
(opens new window)

### # enabled

• enabled: `Scriptable`<`boolean`, `ScriptableTooltipContext`<`TType`>>

Are on-canvas tooltips enabled?

`default` true

#### # Defined in

index.esm.d.ts:2615
(opens new window)

### # footerAlign

• footerAlign: `Scriptable`<`TextAlign`, `ScriptableTooltipContext`<`TType`>>

Horizontal alignment of the footer text lines.

`default` 'left'

#### # Defined in

index.esm.d.ts:2717
(opens new window)

### # footerColor

• footerColor: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Color of footer

`default` '#fff'

#### # Defined in

index.esm.d.ts:2707
(opens new window)

### # footerFont

• footerFont: `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableTooltipContext`<`TType`>>

See Fonts

`default` {weight: 'bold'}

#### # Defined in

index.esm.d.ts:2712
(opens new window)

### # footerMarginTop

• footerMarginTop: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Margin to add before drawing the footer.

`default` 6

#### # Defined in

index.esm.d.ts:2702
(opens new window)

### # footerSpacing

• footerSpacing: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Spacing to add to top and bottom of each footer line.

`default` 2

#### # Defined in

index.esm.d.ts:2697
(opens new window)

### # includeInvisible

• includeInvisible: `boolean`

if true, the invisible points that are outside of the chart area will also be included when evaluating interactions.

`default` false

#### # Inherited from

CoreInteractionOptions.includeInvisible

#### # Defined in

index.esm.d.ts:1445
(opens new window)

### # intersect

• intersect: `boolean`

if true, the hover mode only applies when the mouse position intersects an item on the chart.

`default` true

#### # Inherited from

CoreInteractionOptions.intersect

#### # Defined in

index.esm.d.ts:1434
(opens new window)

### # mode

• mode: keyof `InteractionModeMap`

Sets which elements appear in the tooltip. See Interaction Modes for details.

`default` 'nearest'

#### # Inherited from

CoreInteractionOptions.mode

#### # Defined in

index.esm.d.ts:1429
(opens new window)

### # multiKeyBackground

• multiKeyBackground: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Color to draw behind the colored boxes when multiple items are in the tooltip.

`default` '#fff'

#### # Defined in

index.esm.d.ts:2742
(opens new window)

### # padding

• padding: `Scriptable`<`number` | `ChartArea`, `ScriptableTooltipContext`<`TType`>>

Padding to add to the tooltip

`default` 6

#### # Defined in

index.esm.d.ts:2722
(opens new window)

### # position

• position: `Scriptable`<keyof `TooltipPositionerMap`, `ScriptableTooltipContext`<`TType`>>

The mode for positioning the tooltip

#### # Defined in

index.esm.d.ts:2623
(opens new window)

### # rtl

• rtl: `Scriptable`<`boolean`, `ScriptableTooltipContext`<`TType`>>

true for rendering the legends from right to left.

#### # Defined in

index.esm.d.ts:2776
(opens new window)

### # textDirection

• textDirection: `Scriptable`<`string`, `ScriptableTooltipContext`<`TType`>>

This will force the text direction 'rtl' or 'ltr on the canvas for rendering the tooltips, regardless of the css specified on the canvas

`default` canvas's default

#### # Defined in

index.esm.d.ts:2782
(opens new window)

### # titleAlign

• titleAlign: `Scriptable`<`TextAlign`, `ScriptableTooltipContext`<`TType`>>

Horizontal alignment of the title text lines.

`default` 'left'

#### # Defined in

index.esm.d.ts:2672
(opens new window)

### # titleColor

• titleColor: `Scriptable`<`Color`, `ScriptableTooltipContext`<`TType`>>

Color of title

`default` '#fff'

#### # Defined in

index.esm.d.ts:2652
(opens new window)

### # titleFont

• titleFont: `ScriptableAndScriptableOptions`<`Partial`<`FontSpec`>, `ScriptableTooltipContext`<`TType`>>

See Fonts

`default` {weight: 'bold'}

#### # Defined in

index.esm.d.ts:2657
(opens new window)

### # titleMarginBottom

• titleMarginBottom: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Margin to add on bottom of title section.

`default` 6

#### # Defined in

index.esm.d.ts:2667
(opens new window)

### # titleSpacing

• titleSpacing: `Scriptable`<`number`, `ScriptableTooltipContext`<`TType`>>

Spacing to add to top and bottom of each title line.

`default` 2

#### # Defined in

index.esm.d.ts:2662
(opens new window)

### # usePointStyle

• usePointStyle: `Scriptable`<`boolean`, `ScriptableTooltipContext`<`TType`>>

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)

`default` false

#### # Defined in

index.esm.d.ts:2762
(opens new window)

### # xAlign

• xAlign: `Scriptable`<`TooltipXAlignment`, `ScriptableTooltipContext`<`TType`>>

Override the tooltip alignment calculations

#### # Defined in

index.esm.d.ts:2628
(opens new window)

### # yAlign

• yAlign: `Scriptable`<`TooltipYAlignment`, `ScriptableTooltipContext`<`TType`>>

#### # Defined in

index.esm.d.ts:2629
(opens new window)

## # Methods

### # external

▸ external(`args`): `void`

See external tooltip section.

#### # Parameters

Name | Type
--- | ---
`args` | `Object`
`args.chart` | `Chart`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>
`args.tooltip` | `TooltipModel`<`TType`>

#### # Returns

`void`

#### # Defined in

index.esm.d.ts:2619
(opens new window)

### # filter

▸ filter(`e`, `index`, `array`, `data`): `boolean`

#### # Parameters

Name | Type
--- | ---
`e` | `TooltipItem`<`TType`>
`index` | `number`
`array` | `TooltipItem`<`TType`>[]
`data` | `ChartData`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>

#### # Returns

`boolean`

#### # Defined in

index.esm.d.ts:2636
(opens new window)

### # itemSort

▸ itemSort(`a`, `b`, `data`): `number`

Sort tooltip items.

#### # Parameters

Name | Type
--- | ---
`a` | `TooltipItem`<`TType`>
`b` | `TooltipItem`<`TType`>
`data` | `ChartData`<keyof `ChartTypeRegistry`, (`number` | `ScatterDataPoint` | `BubbleDataPoint`)[], `unknown`>

#### # Returns

`number`

#### # Defined in

index.esm.d.ts:2634
(opens new window)