Tooltip Plugin
Reference External Link
The tooltip extension is a feature that allows you to customize the behavior and appearance of tooltips displayed when users interact with chart elements. Tooltips provide additional information about a data point when the user hovers over or taps on it.
Namespace:
options.plugins.tooltip
.Options(o => o
.Plugins(p => p
.Tooltip(t => t
.Enabled(true)
.Mode("index")
.Intersect(false)
.TitleColor("#fff"))))"options": {
"plugins": {
"tooltip": {
"enabled": true,
"mode": "index",
"intersect": false,
"titleColor": "#fff"
}
}
}Enabled
Are on-canvas tooltips enabled? Default true
.Enabled(false)External
External function name. External Link
.External("myExternalFunction")Mode
Sets which elements appear in the tooltip. Default interaction.mode External Link
.Mode("index")Intersect
If true, the tooltip mode applies only when the mouse position intersects with an element. If false, the mode will be applied at all times. Default interaction.intersect
.Intersect(true)Position
The mode for positioning the tooltip. Default 'average' External Link
.Position(TooltipPosition.Nearest)Or, set the custom position. External Link
.Position("myCustomPosition")ItemSort
Sort tooltip items. Default function External Link
.ItemSort("mySortFunction")Filter
Filter tooltip items. Default function External Link
.Filter("myFilterFunction")BackgroundColor
Background color of the tooltip. External Link
.BackgroundColor("rgba(0, 0, 0, 0.8)")TitleColor
Color of title text. Default '#fff' External Link
.TitleColor("#fff")TitleFont
See font configuration. Link
.TitleFont(f => f.Family("...").Size(10))TitleAlign
Horizontal alignment of the title text lines. Default 'left' External Link
.TitleAlign(TextAlign.Center)TitleSpacing
Spacing to add to top and bottom of each title line. Default 2
.TitleSpacing(3)TitleMarginBottom
Margin to add on bottom of title section. Default 6
.TitleMarginBottom(5)BodyColor
Color of body text. defautl '#fff' External Link
.BodyColor("#fff")BodyFont
See font configuration. Link
.BodyFont(f => f.Family("...").Size(10))BodyAlign
Horizontal alignment of the body text lines. Default 'left' External Link
.BodyAlign(TextAlign.Center)BodySpacing
Spacing to add to top and bottom of each tooltip item. Default 2
.BodySpacing(3)FooterColor
Color of footer text. Default '#fff'
.FooterColor("#fff")FooterFont
See font configuration. Link
.FooterFont(f => f.Family("...").Size(10))FooterAlign
Horizontal alignment of the footer text lines. Default 'left' External Link
.FooterAlign(TextAlign.Center)FooterSpacing
Spacing to add to top and bottom of each footer line. Default 2
.FooterSpacing(3)FooterMarginTop
Margin to add before drawing the footer. Default 6
.FooterMarginTop(5)Padding
Padding inside the tooltip. Default 6
.Padding(5)See padding configuration. Link
.Padding(p => p.Top(5).Bottom(10))CaretPadding
Extra distance to move the end of the tooltip arrow away from the tooltip point. Default 2
.CaretPadding(15)CaretSize
Size, in px, of the tooltip arrow. Default 5
.CaretSize(4)CornerRadius
Radius of tooltip corner curves. Default 6
.CornerRadius(5)MultiKeyBackground
Color to draw behind the colored boxes when multiple items are in the tooltip. Default '#fff'
.MultiKeyBackground("#fff")DisplayColors
If true, color boxes are shown in the tooltip. Default true
.DisplayColors(false)BoxWidth
Width of the color box if displayColors is true. Default bodyFont.size
.BoxWidth(15)BoxHeight
Height of the color box if displayColors is true. Default bodyFont.size
.BoxHeight(15)BoxPadding
Padding between the color box and the text. Default 1
.BoxPadding(2)UsePointStyle
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
.UsePointStyle(true)BorderColor
Color of the border. External Link
.BorderColor("'rgba(0, 0, 0, 0)'")BorderWidth
Size of the border. Default 0
.BorderWidth(1)Rtl
true for rendering the tooltip from right to left.
.Rtl(true)TextDirection
This will force the text direction 'rtl' or 'ltr' on the canvas for rendering the tooltips, regardless of the css specified on the canvas.
.TextDirection("rtl")XAlign
Position of the tooltip caret in the X direction. External Link
.XAlign("left")YAlign
Position of the tooltip caret in the Y direction. External Link
.YAlign("left")Callbacks
Namespace: options.plugins.tooltip.callbacks, the tooltip has the following callbacks for providing text. For all functions, this will be the tooltip object created from the Tooltip constructor. If the callback returns undefined, then the default callback will be used. To remove things from the tooltip callback should return an empty string. External Link
.Callbacks(c => c.BeforeTitle("...").Title("..."))BeforeTitle
Returns the text to render before the title.
.BeforeTitle("myFunction")Title
Returns text to render as the title of the tooltip.
.Title("myFunction")AfterTitle
Returns text to render after the title.
.AfterTitle("myFunction")BeforeBody
Returns text to render before the body section.
.BeforeBody("myFunction")BeforeLabel
Returns text to render before an individual label. This will be called for each item in the tooltip.
.BeforeLabel("myFunction")Label
Returns text to render for an individual item in the tooltip.
.Label("myFunction")LabelColor
Returns the colors to render for the tooltip item.
.LabelColor("myFunction")LabelTextColor
Returns the colors for the text of the label for the tooltip item.
.LabelTextColor("myFunction")LabelPointStyle
Returns the point style to use instead of color boxes if usePointStyle is true (object with values pointStyle and rotation). Default implementation uses the point style from the dataset points.
.LabelPointStyle("myFunction")AfterLabel
Returns text to render after an individual label.
.AfterLabel("myFunction")AfterBody
Returns text to render after the body section.
.AfterBody("myFunction")BeforeFooter
Returns text to render before the footer section.
.BeforeFooter("myFunction")Footer
Returns text to render as the footer of the tooltip.
.Footer("myFunction")AfterFooter
Text to render after the footer section.
.AfterFooter("myFunction")