Highcharts tooltip backgroundColor inherit from the hovered element

Question

Its possible to add backgroundColor to the tooltip as the hovered line?

For example when hover on blue the tooltip backgroundColor to be blue

    tooltip: {
            borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            borderRadius: 0,
            shadow: false,
            useHTML: true,
            percentageDecimals: 2,
            backgroundColor: "rgba(255,255,255,1)",
            formatter: function () {
                return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        }

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/style/

Answer 1

You could use the mouseOver event of a series to change the fill color of the tooltip.

See this code demonstration:

plotOptions: {
    series: {
        events: {
            mouseOver: function(event) {
                $(".highcharts-tooltip > path:last").attr("fill", this.color);
            }
        }
    }
}

And this JSFiddle example of it in action.

Answer 2

You can set useHTML as true, disable paddings and add style param in your div. Example: http://jsfiddle.net/50pvg4b3/

tooltip: {
            useHTML:true,
            style:{
                padding:0
            },
            formatter: function () {
                return '<div class="tooltip" style="background-color:'+this.series.color+';">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
            }
        },