# Interface: TooltipOptions<TType>

# Type parameters

Name Type
TType extends ChartType = ChartType

# Hierarchy

# Properties

# animation

animation: AnimationSpec<TType>

# Defined in

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


# animations

animations: AnimationsSpec<TType>

# Defined in

index.esm.d.ts:2768 (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:1438 (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:2625 (opens new window)


# bodyAlign

bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the body text lines.

default 'left'

# Defined in

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


# bodyColor

bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of body

default '#fff'

# Defined in

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


# bodyFont

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

See Fonts.

default {}

# Defined in

index.esm.d.ts:2670 (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:2660 (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:2750 (opens new window)


# borderWidth

borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Size of the border.

default 0

# Defined in

index.esm.d.ts:2755 (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:2740 (opens new window)


# boxPadding

boxPadding: number

Padding between the color box and the text.

default 1

# Defined in

index.esm.d.ts:2630 (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:2735 (opens new window)


# callbacks

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

# Defined in

index.esm.d.ts:2769 (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:2710 (opens new window)


# caretSize

caretSize: Scriptable<number, ScriptableTooltipContext<TType>>

Size, in px, of the tooltip arrow.

default 5

# Defined in

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


# cornerRadius

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

Radius of tooltip corner curves.

default 6

# Defined in

index.esm.d.ts:2720 (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:2730 (opens new window)


# enabled

enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>

Are on-canvas tooltips enabled?

default true

# Defined in

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


# footerAlign

footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the footer text lines.

default 'left'

# Defined in

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


# footerColor

footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of footer

default '#fff'

# Defined in

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


# footerFont

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

See Fonts

default {weight: 'bold'}

# Defined in

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


# footerMarginTop

footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add before drawing the footer.

default 6

# Defined in

index.esm.d.ts:2685 (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:2680 (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:1444 (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:1433 (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:1428 (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:2725 (opens new window)


# padding

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

Padding to add to the tooltip

default 6

# Defined in

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


# position

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

The mode for positioning the tooltip

# Defined in

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


# rtl

rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>

true for rendering the legends from right to left.

# Defined in

index.esm.d.ts:2759 (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:2765 (opens new window)


# titleAlign

titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the title text lines.

default 'left'

# Defined in

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


# titleColor

titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of title

default '#fff'

# Defined in

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


# titleFont

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

See Fonts

default {weight: 'bold'}

# Defined in

index.esm.d.ts:2640 (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:2650 (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:2645 (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:2745 (opens new window)


# xAlign

xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>

Override the tooltip alignment calculations

# Defined in

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


# yAlign

yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>

# Defined in

index.esm.d.ts:2612 (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:2602 (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:2619 (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:2617 (opens new window)