highcharts - Customise Highstock tooltip conditionally -

i make tooltip in highstock styled differently(not style of content, style tooltip itself. example, different padding, shadow, border radious etc) when hovering on flag series , line serieses. however, looks these properties needs configured in tooltip configuration object. not sure if can dynamically changed.

like in jsbin: http://jsbin.com/cixowuloxa/1/edit?js,output

what's better way give 'summer arrives' tooltip different style other shared tooltips?

your approach correct. in formatter callback wrap text in html tags , style using css, inline or class name, depending if flag or line series. make sure set usehtml true.

 tooltip: {         usehtml:true,         borderwidth: 0,         headerformat: '',         shared: true,         formatter: function(){           if (!!this.points) {             return this.points            .reduce(            function(prev, cur) {               return prev +                '<br>' + cur.series.name + ': '+ cur.y;            }, '');           }            return "<div style='border:5px solid black; padding: 20px'>summer arrives!</div>";          },         padding: 0       } 

example: https://jsfiddle.net/hpeq7lbe/1/

actually, can set different options flag's , line's tooltip, not options supported, e.g. padding or border width not work - have set in tooltip's global options.

plotoptions: {         line: {         tooltip: {             pointformat: 'line',           borderwidth: 10, // not supported           padding: 10 // not supported         }       },       flags: {         tooltip: {             pointformat: 'flags',           borderwidth: 1, //not supported           padding: 1 // not supported         }       }     } 

example: https://jsfiddle.net/hpeq7lbe/3/