Tooltip

Reference

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

helperjs output

.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("myExternalFunction")

Mode¶

Sets which elements appear in the tooltip. Default interaction.mode

.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'

.Position(TooltipPosition.Nearest)

Or, set the custom position.

.Position("myCustomPosition")

ItemSort¶

Sort tooltip items. Default function

.ItemSort("mySortFunction")

Filter¶

Filter tooltip items. Default function

.Filter("myFilterFunction")

BackgroundColor¶

Background color of the tooltip.

.BackgroundColor("rgba(0, 0, 0, 0.8)")

TitleColor¶

Color of title text. Default '#fff'

.TitleColor("#fff")

TitleFont¶

See font configuration.

.TitleFont(f => f.Family("...").Size(10))

TitleAlign¶

Horizontal alignment of the title text lines. Default 'left'

.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'

.BodyColor("#fff")

BodyFont¶

See font configuration.

.BodyFont(f => f.Family("...").Size(10))

BodyAlign¶

Horizontal alignment of the body text lines. Default 'left'

.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.

.FooterFont(f => f.Family("...").Size(10))

FooterAlign¶

Horizontal alignment of the footer text lines. Default 'left'

.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.

.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.

.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.

.XAlign("left")

YAlign¶

Position of the tooltip caret in the Y direction.

.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.

.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")

Returns text to render as the footer of the tooltip.

.Footer("myFunction")

AfterFooter¶

Text to render after the footer section.

.AfterFooter("myFunction")