# Interface: TooltipOptions<TType>

# Type parameters

Name Type
TType extends ChartType

# Hierarchy

# Properties

# animation

animation: AnimationSpec<TType>

# Defined in

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


# animations

animations: AnimationsSpec<TType>

# Defined in

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


# bodyAlign

bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the body text lines.

default 'left'

# Defined in

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


# bodyColor

bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of body

default '#fff'

# Defined in

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


# bodyFont

bodyFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts.

default {}

# Defined in

index.esm.d.ts:2519 (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:2509 (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:2599 (opens new window)


# borderWidth

borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>

Size of the border.

default 0

# Defined in

index.esm.d.ts:2604 (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:2589 (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:2584 (opens new window)


# callbacks

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

# Defined in

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


# caretSize

caretSize: Scriptable<number, ScriptableTooltipContext<TType>>

Size, in px, of the tooltip arrow.

default 5

# Defined in

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


# cornerRadius

cornerRadius: Scriptable<number, ScriptableTooltipContext<TType>>

Radius of tooltip corner curves.

default 6

# Defined in

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


# enabled

enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>

Are on-canvas tooltips enabled?

default true

# Defined in

index.esm.d.ts:2452 (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, index, array, data): 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:2473 (opens new window)


# footerAlign

footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the footer text lines.

default 'left'

# Defined in

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


# footerColor

footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of footer

default '#fff'

# Defined in

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


# footerFont

footerFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {weight: 'bold'}

# Defined in

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


# footerMarginTop

footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>

Margin to add before drawing the footer.

default 6

# Defined in

index.esm.d.ts:2534 (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:2529 (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:1357 (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

# Type declaration

▸ (a, b, data): number

Sort tooltip items.

# 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:2471 (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:1352 (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:2574 (opens new window)


# padding

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

Padding to add to the tooltip

default 6

# Defined in

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


# position

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

The mode for positioning the tooltip

# Defined in

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


# rtl

rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>

true for rendering the legends from right to left.

# Defined in

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


# titleAlign

titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Horizontal alignment of the title text lines.

default 'left'

# Defined in

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


# titleColor

titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>

Color of title

default '#fff'

# Defined in

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


# titleFont

titleFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>

See Fonts

default {weight: 'bold'}

# Defined in

index.esm.d.ts:2489 (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:2499 (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:2494 (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:2594 (opens new window)


# xAlign

xAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>

Override the tooltip alignment calculations

# Defined in

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


# yAlign

yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>

# Defined in

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

# Methods

# external

external(args): 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:2456 (opens new window)