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 the custom tooltip uses this state to make itself visible:
<html><head> ...
<style>
#tooltip {
opacity: 0;
position: absolute;
margin: 5px;
}
</style>
</head><body...
