Custom HTML tooltips
The Chart.defaults.global.tooltips.custom (or options.tooltips.custom) property receives a function that should build an HTML tooltip and connect it to a tooltip model object passed as a parameter. The tooltip model is a native object that responds to tooltip events and stores tooltip properties. Its properties can be copied and reused inside the HTML tooltip if desired.
The following example (Tooltips/tooltip-7-custom.html) shows how to create a simple custom HTML tooltip containing an image. The custom tooltip can be created using HTML as shown in the following snippet, or programmatically using DOM, and should initially be hidden (opacity: 0). When a hover event activates a tooltip, the model’s opacity changes and ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access