# Interface: TooltipOptions<TType>

# Type parameters

Name	Type
`TType`	extends `ChartType` = `ChartType`

# Hierarchy

CoreInteractionOptions

↳ TooltipOptions

# Properties

# animation

• animation: false | AnimationSpec<TType>

# Defined in

types/index.d.ts:2924

# animations

• animations: false | AnimationsSpec<TType>

# Defined in

types/index.d.ts:2925

# 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

types/index.d.ts:1590

# backgroundColor

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

Background color of the tooltip.

Default

'rgba(0, 0, 0, 0.8)'

# Defined in

types/index.d.ts:2782

# bodyAlign

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

Horizontal alignment of the body text lines.

Default

'left'

# Defined in

types/index.d.ts:2832

# bodyColor

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

Color of body

Default

'#fff'

# Defined in

types/index.d.ts:2822

# bodyFont

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

See Fonts.

Default

# Defined in

types/index.d.ts:2827

# bodySpacing

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

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

Default

# Defined in

types/index.d.ts:2817

# borderColor

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

Color of the border.

Default

'rgba(0, 0, 0, 0)'

# Defined in

types/index.d.ts:2907

# borderWidth

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

Size of the border.

Default

# Defined in

types/index.d.ts:2912

# boxHeight

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

Height of the color box if displayColors is true.

Default

bodyFont.size

# Defined in

types/index.d.ts:2897

# boxPadding

• boxPadding: number

Padding between the color box and the text.

Default

# Defined in

types/index.d.ts:2787

# boxWidth

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

Width of the color box if displayColors is true.

Default

bodyFont.size

# Defined in

types/index.d.ts:2892

# callbacks

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

# Defined in

types/index.d.ts:2926

# caretPadding

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

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

Default

# Defined in

types/index.d.ts:2867

# caretSize

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

Size, in px, of the tooltip arrow.

Default

# Defined in

types/index.d.ts:2872

# cornerRadius

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

Radius of tooltip corner curves.

Default

# Defined in

types/index.d.ts:2877

# displayColors

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

If true, color boxes are shown in the tooltip.

Default

true

# Defined in

types/index.d.ts:2887

# enabled

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

Are on-canvas tooltips enabled?

Default

true

# Defined in

types/index.d.ts:2755

# filter

• filter: (e: TooltipItem<TType>, index: number, array: TooltipItem<TType>[], data: ChartData<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>) => boolean

# Type declaration

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

# Parameters

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

# Returns

boolean

# Defined in

types/index.d.ts:2776

# footerAlign

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

Horizontal alignment of the footer text lines.

Default

'left'

# Defined in

types/index.d.ts:2857

# footerColor

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

Color of footer

Default

'#fff'

# Defined in

types/index.d.ts:2847

# footerFont

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

See Fonts

Default

# Defined in

types/index.d.ts:2852

# footerMarginTop

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

Margin to add before drawing the footer.

Default

# Defined in

types/index.d.ts:2842

# footerSpacing

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

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

Default

# Defined in

types/index.d.ts:2837

# 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

types/index.d.ts:1596

# 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

types/index.d.ts:1585

# itemSort

• itemSort: (a: TooltipItem<TType>, b: TooltipItem<TType>, data: ChartData<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint)[], unknown>) => number

# Type declaration

▸ (a, b, data): number

Sort tooltip items.

# Parameters

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

# Returns

number

# Defined in

types/index.d.ts:2774

# mode

• mode: keyof InteractionModeMap

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

Default

'nearest'

# Inherited from

CoreInteractionOptions.mode

# Defined in

types/index.d.ts:1580

# multiKeyBackground

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

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

Default

'#fff'

# Defined in

types/index.d.ts:2882

# padding

• padding: Scriptable<Padding, ScriptableTooltipContext<TType>>

Padding to add to the tooltip

Default

# Defined in

types/index.d.ts:2862

# position

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

The mode for positioning the tooltip

# Defined in

types/index.d.ts:2763

# rtl

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

true for rendering the legends from right to left.

# Defined in

types/index.d.ts:2916

# 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

types/index.d.ts:2922

# titleAlign

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

Horizontal alignment of the title text lines.

Default

'left'

# Defined in

types/index.d.ts:2812

# titleColor

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

Color of title

Default

'#fff'

# Defined in

types/index.d.ts:2792

# titleFont

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

See Fonts

Default

# Defined in

types/index.d.ts:2797

# titleMarginBottom

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

Margin to add on bottom of title section.

Default

# Defined in

types/index.d.ts:2807

# titleSpacing

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

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

Default

# Defined in

types/index.d.ts:2802

# 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

types/index.d.ts:2902

# xAlign

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

Override the tooltip alignment calculations

# Defined in

types/index.d.ts:2768

# yAlign

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

# Defined in

types/index.d.ts:2769

# Methods

# external

▸ external(this, args): void

See external tooltip section.

# Parameters

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

# Returns

void

# Defined in

types/index.d.ts:2759