indicatrix / elm-chartjs-webcomponent / Chartjs.Options.Tooltips

For more information, see https://www.chartjs.org/docs/latest/configuration/tooltip.html


type alias Tooltips =
{ enabled : Maybe Basics.Bool
, mode : Maybe Mode
, intersect : Maybe Basics.Bool
, position : Maybe PositionMode
, labelFormat : Maybe LabelFormat
, backgroundColor : Maybe Color
, titleColor : Maybe Color
, titleFont : Maybe Chartjs.Options.Font.FontSpec
, titleAlign : Maybe TooltipTextAlign
, titleSpacing : Maybe Basics.Int
, titleMarginBottom : Maybe Basics.Int
, bodyColor : Maybe Color
, bodyFont : Maybe Chartjs.Options.Font.FontSpec
, bodyAlign : Maybe TooltipTextAlign
, bodySpacing : Maybe Basics.Int
, footerText : Maybe String
, footerColor : Maybe Color
, footerFont : Maybe Chartjs.Options.Font.FontSpec
, footerAlign : Maybe TooltipTextAlign
, footerSpacing : Maybe Basics.Int
, footerMarginTop : Maybe Basics.Int
, caretPadding : Maybe Basics.Int
, caretSize : Maybe Basics.Int
, cornerRadius : Maybe Basics.Int
, multiKeyBackground : Maybe Color
, displayColors : Maybe Basics.Bool
, borderColor : Maybe Color
, borderWidth : Maybe Basics.Int 
}

Tooltips are displayed when interacting with charts

defaultTooltips : Tooltips

Create a blank tooltips object


type PositionMode
    = PositionModeAverage
    | PositionModeNearest

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


type Mode
    = Point
    | Nearest
    | Index
    | DataSet
    | X
    | Y

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)

setBackgroundColor : Color -> Tooltips -> Tooltips

Set the background color of the tooltip

setEnabled : Basics.Bool -> Tooltips -> Tooltips

Set whether tooltips are enabled or not

setIntersect : Basics.Bool -> Tooltips -> Tooltips

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

setMode : Mode -> Tooltips -> Tooltips

Set the tooltip mode

Check the Chart.js docs

setPosition : PositionMode -> Tooltips -> Tooltips

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

Label Formatting

While most of the Chart.js callbacks aren't supported, there's a couple of helpers for formatting labels.


type LabelFormat
    = Prefix String
    | Suffix String

Use setLabelPrefix and setLabelSuffix instead of this directly

setLabelPrefix : String -> Tooltips -> Tooltips

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

example: To format values as currency:

defaultTooltips
    |> setLabelPrefix "$"

setLabelSuffix : String -> Tooltips -> Tooltips

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

example: To format values as percentages:

defaultTooltips
    |> setLabelSuffix "%"

Titles & Text


type TooltipTextAlign
    = Left
    | Right
    | Center

How to align tooltip text

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

setTitleColor : Color -> Tooltips -> Tooltips

Set the color of the title text

setTitleFont : Chartjs.Options.Font.FontSpec -> Tooltips -> Tooltips

Set the font properties for the title text

setTitleAlign : TooltipTextAlign -> Tooltips -> Tooltips

Set the text alignment for the title

setTitleSpacing : Basics.Int -> Tooltips -> Tooltips

Set the spacing to add around each title line

setTitleMarginBottom : Basics.Int -> Tooltips -> Tooltips

Set the margin on the bottom of the title

setBodyColor : Color -> Tooltips -> Tooltips

Set the color of the body text

setBodyFont : Chartjs.Options.Font.FontSpec -> Tooltips -> Tooltips

Set the font properties for the body text

setBodyAlign : TooltipTextAlign -> Tooltips -> Tooltips

Set the text alignment for the body text

setBodySpacing : Basics.Int -> Tooltips -> Tooltips

Set the spacing to add around each tooltip item

setFooterText : String -> Tooltips -> Tooltips

Set the content for the footer

setFooterColor : Color -> Tooltips -> Tooltips

Set the color of the footer text

setFooterFont : Chartjs.Options.Font.FontSpec -> Tooltips -> Tooltips

Set the font properties for the footer text

setFooterAlign : TooltipTextAlign -> Tooltips -> Tooltips

Set the text alignment for the footer text

setFooterSpacing : Basics.Int -> Tooltips -> Tooltips

Set the spacing to add around each footer line

setFooterMarginTop : Basics.Int -> Tooltips -> Tooltips

Set the margin on the top of the footer

setCaretPadding : Basics.Int -> Tooltips -> Tooltips

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

setCaretSize : Basics.Int -> Tooltips -> Tooltips

Set the size (in pixels) of the tooltip arrow

Tooltip Borders

setCornerRadius : Basics.Int -> Tooltips -> Tooltips

Set the radius of the tooltip corners

setBorderColor : Color -> Tooltips -> Tooltips

Set the color of the tooltip border

setBorderWidth : Basics.Int -> Tooltips -> Tooltips

Set the width of the tooltip border

Other Properties

setMultiKeyBackground : Color -> Tooltips -> Tooltips

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

setDisplayColors : Basics.Bool -> Tooltips -> Tooltips

Set whether color boxes are shown in the tooltip