# Interface: TooltipOptions<TType>
# Type parameters
| Name | Type |
|---|---|
TType | extends ChartType = ChartType |
# Hierarchy
-
↳
TooltipOptions
# Properties
# animation
• animation: AnimationSpec<TType>
# Defined in
index.esm.d.ts:2784 (opens new window)
# animations
• animations: AnimationsSpec<TType>
# Defined in
index.esm.d.ts:2785 (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
# Defined in
index.esm.d.ts:1439 (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:2642 (opens new window)
# bodyAlign
• bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the body text lines.
default 'left'
# Defined in
index.esm.d.ts:2692 (opens new window)
# bodyColor
• bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of body
default '#fff'
# Defined in
index.esm.d.ts:2682 (opens new window)
# bodyFont
• bodyFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts.
default {}
# Defined in
index.esm.d.ts:2687 (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:2677 (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:2767 (opens new window)
# borderWidth
• borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>
Size of the border.
default 0
# Defined in
index.esm.d.ts:2772 (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:2757 (opens new window)
# boxPadding
• boxPadding: number
Padding between the color box and the text.
default 1
# Defined in
index.esm.d.ts:2647 (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:2752 (opens new window)
# callbacks
• callbacks: TooltipCallbacks<TType, TooltipModel<TType>, TooltipItem<TType>>
# Defined in
index.esm.d.ts:2786 (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:2727 (opens new window)
# caretSize
• caretSize: Scriptable<number, ScriptableTooltipContext<TType>>
Size, in px, of the tooltip arrow.
default 5
# Defined in
index.esm.d.ts:2732 (opens new window)
# cornerRadius
• cornerRadius: Scriptable<number | BorderRadius, ScriptableTooltipContext<TType>>
Radius of tooltip corner curves.
default 6
# Defined in
index.esm.d.ts:2737 (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:2747 (opens new window)
# enabled
• enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>
Are on-canvas tooltips enabled?
default true
# Defined in
index.esm.d.ts:2615 (opens new window)
# footerAlign
• footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the footer text lines.
default 'left'
# Defined in
index.esm.d.ts:2717 (opens new window)
# footerColor
• footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of footer
default '#fff'
# Defined in
index.esm.d.ts:2707 (opens new window)
# footerFont
• footerFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts
default {weight: 'bold'}
# Defined in
index.esm.d.ts:2712 (opens new window)
# footerMarginTop
• footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>
Margin to add before drawing the footer.
default 6
# Defined in
index.esm.d.ts:2702 (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:2697 (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:1445 (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:1434 (opens new window)
# mode
• mode: keyof InteractionModeMap
Sets which elements appear in the tooltip. See Interaction Modes for details.
default 'nearest'
# Inherited from
# Defined in
index.esm.d.ts:1429 (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:2742 (opens new window)
# padding
• padding: Scriptable<number | ChartArea, ScriptableTooltipContext<TType>>
Padding to add to the tooltip
default 6
# Defined in
index.esm.d.ts:2722 (opens new window)
# position
• position: Scriptable<keyof TooltipPositionerMap, ScriptableTooltipContext<TType>>
The mode for positioning the tooltip
# Defined in
index.esm.d.ts:2623 (opens new window)
# rtl
• rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>
true for rendering the legends from right to left.
# Defined in
index.esm.d.ts:2776 (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:2782 (opens new window)
# titleAlign
• titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the title text lines.
default 'left'
# Defined in
index.esm.d.ts:2672 (opens new window)
# titleColor
• titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of title
default '#fff'
# Defined in
index.esm.d.ts:2652 (opens new window)
# titleFont
• titleFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts
default {weight: 'bold'}
# Defined in
index.esm.d.ts:2657 (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:2667 (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:2662 (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:2762 (opens new window)
# xAlign
• xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>
Override the tooltip alignment calculations
# Defined in
index.esm.d.ts:2628 (opens new window)
# yAlign
• yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>
# Defined in
index.esm.d.ts:2629 (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:2619 (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:2636 (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