How to use the tooltip formatter and still display chart color (like it does by default)?

Question

If I'm using the default Highcharts tooltip, it displays a circle the color of the chart data (the light/dark blue circles at http://jsfiddle.net/WOUNDEDStevenJones/mpMvk/1/):

But if you use custom formatting on the tooltip (http://jsfiddle.net/WOUNDEDStevenJones/4vd7J/), the colors don't appear:

How do you get/use that color in a custom formatted tooltip? From what I can tell, there's nothing in their documentation (http://api.highcharts.com/highcharts#tooltip.formatter) explaining how to use this in a custom formatted tooltip.

This displays the data colors in the tooltip by default:

tooltip: {
    shared: true
}

But this does not:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/>'+ point.series.name +': '+
                    point.y +'m';
        });

        return s;
    },
    shared: true
},

Answer 1

I found the documentation for this (http://api.highcharts.com/highcharts#tooltip.pointFormat). The HTML they're using is located under pointFormat, not formatter:

<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>

Here's the updated code to use to get the colored circles in the tooltip:

tooltip: {
    formatter: function() {
        var s = '<b>'+ this.x +'</b>';

        $.each(this.points, function(i, point) {
            s += '<br/><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + point.y;
        });

        return s;
    },
    shared: true
},