Tooltips are displayed when interacting with charts

Create a blank tooltips object

Positioning mode for tooltips

Average will place the tooltip at the average position of the displayed items Nearest will place the tooltip at the element closest to the event position

Controls what elements are displayed in the tooltip Point: finds all items that intersect the point Nearest: gets the items that are at the nearest distance to the point Index: finds item at the same index X: find all items that interesct (based on X axis only) Y: find all items that intersect (based on Y axis only)

Set the background color of the tooltip

Set whether tooltips are enabled or not

If true, the tooltip mode applies only when the mouse position intersects. If false, the tooltip mode will be applied at all types.

Set the tooltip mode

Check the Chart.js docs

Set how the tooltip should be positioned - see the PositionMode type for more details

Use setLabelPrefix and setLabelSuffix instead of this directly

Set a prefix that should be added to all labels in the tooltip

example: To format values as currency:

defaultTooltips
    |> setLabelPrefix "$"

Set a suffix that should be added to all labels in the tooltip

example: To format values as percentages:

defaultTooltips
    |> setLabelSuffix "%"

How to align tooltip text

This is different to the Common.Align type for some reason - sorry.

Set the color of the title text

Set the font properties for the title text

Set the text alignment for the title

Set the spacing to add around each title line

Set the margin on the bottom of the title

Set the color of the body text

Set the font properties for the body text

Set the text alignment for the body text

Set the spacing to add around each tooltip item

Set the content for the footer

Set the color of the footer text

Set the font properties for the footer text

Set the text alignment for the footer text

Set the spacing to add around each footer line

Set the margin on the top of the footer

Set the padding for the caret - how far away to move the tooltip arrow from the tooltip point

Set the size (in pixels) of the tooltip arrow

Set the radius of the tooltip corners

Set the color of the tooltip border

Set the width of the tooltip border

Set the color to draw behind the colored boxes when multiple items are in the tooltip

Set whether color boxes are shown in the tooltip