# Interface: TooltipOptions<TType>
# Type parameters
| Name | Type |
|---|---|
TType | extends ChartType = ChartType |
# Hierarchy
-
↳
TooltipOptions
# Properties
# animation
• animation: false | AnimationSpec<TType>
# Defined in
types/index.d.ts:2888 (opens new window)
# animations
• animations: false | AnimationsSpec<TType>
# Defined in
types/index.d.ts:2889 (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
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:2746 (opens new window)
# bodyAlign
• bodyAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the body text lines.
Default
'left'
# Defined in
types/index.d.ts:2796 (opens new window)
# bodyColor
• bodyColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of body
Default
'#fff'
# Defined in
types/index.d.ts:2786 (opens new window)
# bodyFont
• bodyFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts.
Default
# Defined in
types/index.d.ts:2791 (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:2781 (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:2871 (opens new window)
# borderWidth
• borderWidth: Scriptable<number, ScriptableTooltipContext<TType>>
Size of the border.
Default
0
# Defined in
types/index.d.ts:2876 (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:2861 (opens new window)
# boxPadding
• boxPadding: number
Padding between the color box and the text.
Default
1
# Defined in
types/index.d.ts:2751 (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:2856 (opens new window)
# callbacks
• callbacks: TooltipCallbacks<TType, TooltipModel<TType>, TooltipItem<TType>>
# Defined in
types/index.d.ts:2890 (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:2831 (opens new window)
# caretSize
• caretSize: Scriptable<number, ScriptableTooltipContext<TType>>
Size, in px, of the tooltip arrow.
Default
5
# Defined in
types/index.d.ts:2836 (opens new window)
# cornerRadius
• cornerRadius: Scriptable<number | BorderRadius, ScriptableTooltipContext<TType>>
Radius of tooltip corner curves.
Default
6
# Defined in
types/index.d.ts:2841 (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:2851 (opens new window)
# enabled
• enabled: Scriptable<boolean, ScriptableTooltipContext<TType>>
Are on-canvas tooltips enabled?
Default
true
# Defined in
types/index.d.ts:2719 (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:2740 (opens new window)
# footerAlign
• footerAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the footer text lines.
Default
'left'
# Defined in
types/index.d.ts:2821 (opens new window)
# footerColor
• footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of footer
Default
'#fff'
# Defined in
types/index.d.ts:2811 (opens new window)
# footerFont
• footerFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts
Default
# Defined in
types/index.d.ts:2816 (opens new window)
# footerMarginTop
• footerMarginTop: Scriptable<number, ScriptableTooltipContext<TType>>
Margin to add before drawing the footer.
Default
6
# Defined in
types/index.d.ts:2806 (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:2801 (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:2738 (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
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:2846 (opens new window)
# padding
• padding: Scriptable<Padding, ScriptableTooltipContext<TType>>
Padding to add to the tooltip
Default
6
# Defined in
types/index.d.ts:2826 (opens new window)
# position
• position: Scriptable<keyof TooltipPositionerMap, ScriptableTooltipContext<TType>>
The mode for positioning the tooltip
# Defined in
types/index.d.ts:2727 (opens new window)
# rtl
• rtl: Scriptable<boolean, ScriptableTooltipContext<TType>>
true for rendering the legends from right to left.
# Defined in
types/index.d.ts:2880 (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:2886 (opens new window)
# titleAlign
• titleAlign: Scriptable<TextAlign, ScriptableTooltipContext<TType>>
Horizontal alignment of the title text lines.
Default
'left'
# Defined in
types/index.d.ts:2776 (opens new window)
# titleColor
• titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>
Color of title
Default
'#fff'
# Defined in
types/index.d.ts:2756 (opens new window)
# titleFont
• titleFont: ScriptableAndScriptableOptions<Partial<FontSpec>, ScriptableTooltipContext<TType>>
See Fonts
Default
# Defined in
types/index.d.ts:2761 (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:2771 (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:2766 (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:2866 (opens new window)
# xAlign
• xAlign: Scriptable<TooltipXAlignment, ScriptableTooltipContext<TType>>
Override the tooltip alignment calculations
# Defined in
types/index.d.ts:2732 (opens new window)
# yAlign
• yAlign: Scriptable<TooltipYAlignment, ScriptableTooltipContext<TType>>
# Defined in
types/index.d.ts:2733 (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