How can I apply different background color to entire tooltip for different series in highcharts

Question

I would to give different backgroundcolor to entire tooltip for different series. I checked highcharts api document but their is no background color option in series.tooltip = {}. Can you please suggest some way or alternative for this?

I checked this question - Changing backgroundcolor of tooltip for a specific data point in Highcharts

My question is similar to this one. ex. I want to apply red color to a series through formatter and not want to honor yellow background color given in tooltip options. please check this fiddle - http://jsfiddle.net/eoqdcxn4/1/

    $(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        
        tooltip: {
            useHTML:true,
            backgroundColor:"yellow",
            formatter: function() {
                console.log(this);
                if(this.point.customBck)
                    return '<div style="background-color:red;">The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
                else
                    return '<div>The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b></div>';
            }
        },
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [{
                y:29.9,
                customBck: true
            }, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

Thanks in advance.

Answer 1

You can change tooltip background color in the refresh event depending on the hovered series, for example:

    (function(H) {
        H.addEvent(H.Tooltip, 'refresh', function(e) {
            var series = this.chart.series.find(function(s) {
                return s.isHovered;
            });

            this.label.attr({
                fill: series.options.tooltipColor
            });
        });
    }(Highcharts));

    $(function() {
        var chart = new Highcharts.Chart({
            ...,

            plotOptions: {
                series: {
                    events: {
                        mouseOver: function() {
                            this.isHovered = true;
                        },
                        mouseOut: function() {
                            this.isHovered = false;
                        }
                    }
                }
            },
            series: [{
                tooltipColor: 'red',
                ...
            }, {
                tooltipColor: 'yellow',
                ...
            }]
        });
    });

---

Live demo: http://jsfiddle.net/BlackLabel/ojqews35/

API Reference: https://api.highcharts.com/highcharts/plotOptions.series.events

Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts