# Interface: TooltipOptions<TType>

# Type parameters

Name Type
TType ChartType

# Hierarchy

# Properties

# animation

animation: AnimationSpec<TType>

Defined in: index.esm.d.ts:2567 (opens new window)


# animations

animations: AnimationsSpec<TType>

Defined in: index.esm.d.ts:2568 (opens new window)


# axis

axis: x | y | xy

Can be set to 'x', 'y', or 'xy' to define 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:1349 (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:2430 (opens new window)


# bodyAlign

bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the body text lines.

default 'left'

Defined in: index.esm.d.ts:2475 (opens new window)


# bodyColor

bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of body

default '#fff'

Defined in: index.esm.d.ts:2465 (opens new window)


# bodyFont

bodyFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts.

default {}

Defined in: index.esm.d.ts:2470 (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:2460 (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:2550 (opens new window)


# borderWidth

borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Size of the border.

default 0

Defined in: index.esm.d.ts:2555 (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:2540 (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:2535 (opens new window)


# callbacks

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

Defined in: index.esm.d.ts:2569 (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:2510 (opens new window)


# caretSize

caretSize: Scriptable<number, ScriptableTooltipContext<TType>>

Size, in px, of the tooltip arrow.

default 5

Defined in: index.esm.d.ts:2515 (opens new window)


# cornerRadius

cornerRadius: Scriptable<number, ScriptableTooltipContext<TType>>

Radius of tooltip corner curves.

default 6

Defined in: index.esm.d.ts:2520 (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:2530 (opens new window)


# enabled

enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>

Are on-canvas tooltips enabled?

default true

Defined in: index.esm.d.ts:2403 (opens new window)


# filter

filter: (e: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, index: number, array: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>[], data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>) => boolean

# Type declaration:

▸ (e: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, index: number, array: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>[], data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>): boolean

# Parameters:

Name Type
e TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>
index number
array TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>[]
data ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>

Returns: boolean

Defined in: index.esm.d.ts:2424 (opens new window)

Defined in: index.esm.d.ts:2424 (opens new window)


# footerAlign

footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the footer text lines.

default 'left'

Defined in: index.esm.d.ts:2500 (opens new window)


# footerColor

footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of footer

default '#fff'

Defined in: index.esm.d.ts:2490 (opens new window)


# footerFont

footerFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {weight: 'bold'}

Defined in: index.esm.d.ts:2495 (opens new window)


# footerMarginTop

footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add before drawing the footer.

default 6

Defined in: index.esm.d.ts:2485 (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:2480 (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:1344 (opens new window)


# itemSort

itemSort: (a: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, b: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>) => number

Sort tooltip items.

# Type declaration:

▸ (a: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, b: TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>, data: ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>): number

# Parameters:

Name Type
a TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>
b TooltipItem<bar | line | scatter | bubble | pie | doughnut | polarArea | radar>
data ChartData<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>

Returns: number

Defined in: index.esm.d.ts:2422 (opens new window)

Defined in: index.esm.d.ts:2422 (opens new window)


# mode

mode: x | y | dataset | index | point | nearest

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

default 'nearest'

Inherited from: CoreInteractionOptions.mode

Defined in: index.esm.d.ts:1339 (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:2525 (opens new window)


# padding

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

Padding to add to the tooltip

default 6

Defined in: index.esm.d.ts:2505 (opens new window)


# position

position: Scriptable<nearest | average, ScriptableTooltipContext<TType>>

The mode for positioning the tooltip

Defined in: index.esm.d.ts:2411 (opens new window)


# rtl

rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>

true for rendering the legends from right to left.

Defined in: index.esm.d.ts:2559 (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:2565 (opens new window)


# titleAlign

titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the title text lines.

default 'left'

Defined in: index.esm.d.ts:2455 (opens new window)


# titleColor

titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of title

default '#fff'

Defined in: index.esm.d.ts:2435 (opens new window)


# titleFont

titleFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {weight: 'bold'}

Defined in: index.esm.d.ts:2440 (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:2450 (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:2445 (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:2545 (opens new window)


# xAlign

xAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Override the tooltip alignment calculations

Defined in: index.esm.d.ts:2416 (opens new window)


# yAlign

yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>

Defined in: index.esm.d.ts:2417 (opens new window)

# Methods

# external

external(args: { chart: Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown> ; tooltip: TooltipModel<TType> }): void

See external tooltip section.

# Parameters:

Name Type
args object
args.chart Chart<bar | line | scatter | bubble | pie | doughnut | polarArea | radar, (number | ScatterDataPoint | BubbleDataPoint)[], unknown>
args.tooltip TooltipModel<TType>

Returns: void

Defined in: index.esm.d.ts:2407 (opens new window)