For more information, see https://www.chartjs.org/docs/latest/configuration/tooltip.html
{ 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
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)
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
While most of the Chart.js callbacks aren't supported, there's a couple of helpers for formatting labels.
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 "%"
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
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
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