Custom tooltips in Highcharts diagrams

Question

Is there any way to make completely custom tooltips in Highcharts diagrams? Not just with different data, or with coloured border, but to make it look different (for example, like a bubble with picture in it).

Solution 1

Try this:

....

tooltip: {
                useHTML: true,
                formatter: function() { 
                    return 'here the html code';
                }
            },

Solution 2

Using the options/api you can only configure such things as border properties and colors (see tooltip options). So without editing the source or going outside the api, no it is not possible.

Internally the tooltip consists of a SVG group that contains a rectangle with a text inside. If you want to edit the source, have a look in the Chart.js file around line 1898.

Solution 3

I've used another post from a different thread, and merged the useHTML section along with it to add an image as part of each tool tip at the top. I chose BBC logo at the top..

so, you can use

tooltip: {
    useHTML: true,
    formatter: function() { 
        // Use regular html syntax
        s = '<img src="" />' + 
        return s;
    }
}

Here is the jsfiddle working example