# Interface: TooltipOptions<TType>

# Type parameters

Name Type
TType extends ChartType = ChartType

# Hierarchy

# Properties

# animation

animation: false | AnimationSpec<TType>

# Defined in

types/index.d.ts:2894 (opens new window)


# animations

animations: false | AnimationsSpec<TType>

# Defined in

types/index.d.ts:2895 (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

types/index.d.ts:1579 (opens new window)


# backgroundColor

backgroundColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Background color of the tooltip.

Default

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

# Defined in

types/index.d.ts:2752 (opens new window)


# bodyAlign

bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the body text lines.

Default

'left'

# Defined in

types/index.d.ts:2802 (opens new window)


# bodyColor

bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of body

Default

'#fff'

# Defined in

types/index.d.ts:2792 (opens new window)


# bodyFont

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

See Fonts.

Default

# Defined in

types/index.d.ts:2797 (opens new window)


# bodySpacing

bodySpacing: Scriptable<number, ScriptableTooltipContext<TType>>

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

Default

2

# Defined in

types/index.d.ts:2787 (opens new window)


# borderColor

borderColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of the border.

Default

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

# Defined in

types/index.d.ts:2877 (opens new window)


# borderWidth

borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Size of the border.

Default

0

# Defined in

types/index.d.ts:2882 (opens new window)


# boxHeight

boxHeight: Scriptable<number, ScriptableTooltipContext<TType>>

Height of the color box if displayColors is true.

Default

bodyFont.size

# Defined in

types/index.d.ts:2867 (opens new window)


# boxPadding

boxPadding: number

Padding between the color box and the text.

Default

1

# Defined in

types/index.d.ts:2757 (opens new window)


# boxWidth

boxWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Width of the color box if displayColors is true.

Default

bodyFont.size

# Defined in

types/index.d.ts:2862 (opens new window)


# callbacks

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

# Defined in

types/index.d.ts:2896 (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

types/index.d.ts:2837 (opens new window)


# caretSize

caretSize: Scriptable<number, ScriptableTooltipContext<TType>>

Size, in px, of the tooltip arrow.

Default

5

# Defined in

types/index.d.ts:2842 (opens new window)


# cornerRadius

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

Radius of tooltip corner curves.

Default

6

# Defined in

types/index.d.ts:2847 (opens new window)


# displayColors

displayColors: Scriptable<boolean, ScriptableTooltipContext<TType>>

If true, color boxes are shown in the tooltip.

Default

true

# Defined in

types/index.d.ts:2857 (opens new window)


# enabled

enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>

Are on-canvas tooltips enabled?

Default

true

# Defined in

types/index.d.ts:2725 (opens new window)


# 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:2746 (opens new window)


# footerAlign

footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the footer text lines.

Default

'left'

# Defined in

types/index.d.ts:2827 (opens new window)


# footerColor

footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of footer

Default

'#fff'

# Defined in

types/index.d.ts:2817 (opens new window)


# footerFont

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

See Fonts

Default

# Defined in

types/index.d.ts:2822 (opens new window)


# footerMarginTop

footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add before drawing the footer.

Default

6

# Defined in

types/index.d.ts:2812 (opens new window)


# footerSpacing

footerSpacing: Scriptable<number, ScriptableTooltipContext<TType>>

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

Default

2

# Defined in

types/index.d.ts:2807 (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

types/index.d.ts:1585 (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

types/index.d.ts:1574 (opens new window)


# 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:2744 (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

types/index.d.ts:1569 (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

types/index.d.ts:2852 (opens new window)


# padding

padding: Scriptable<Padding, ScriptableTooltipContext<TType>>

Padding to add to the tooltip

Default

6

# Defined in

types/index.d.ts:2832 (opens new window)


# position

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

The mode for positioning the tooltip

# Defined in

types/index.d.ts:2733 (opens new window)


# rtl

rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>

true for rendering the legends from right to left.

# Defined in

types/index.d.ts:2886 (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

types/index.d.ts:2892 (opens new window)


# titleAlign

titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the title text lines.

Default

'left'

# Defined in

types/index.d.ts:2782 (opens new window)


# titleColor

titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of title

Default

'#fff'

# Defined in

types/index.d.ts:2762 (opens new window)


# titleFont

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

See Fonts

Default

# Defined in

types/index.d.ts:2767 (opens new window)


# titleMarginBottom

titleMarginBottom: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add on bottom of title section.

Default

6

# Defined in

types/index.d.ts:2777 (opens new window)


# titleSpacing

titleSpacing: Scriptable<number, ScriptableTooltipContext<TType>>

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

Default

2

# Defined in

types/index.d.ts:2772 (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

types/index.d.ts:2872 (opens new window)


# xAlign

xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>

Override the tooltip alignment calculations

# Defined in

types/index.d.ts:2738 (opens new window)


# yAlign

yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>

# Defined in

types/index.d.ts:2739 (opens new window)

# 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:2729 (opens new window)