How To Set Tooltip Border Color From Series In Highcharts

By default, the border takes the color of the corresponding series or point. But I'd like to set a different color to the tooltip of a certain data point, without changing the colo

Solution 1:

It can be achieved by wrapping tooltip.refresh() method.

First, I check if the tooltip is shown, not shared, not split (a shared or split tooltip require a little different code). Then, I check if the options are set and change svg element's stroke attribute.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
p.call(this, point, mouseEvent);

if (!this.isHidden && !this.shared && !this.split) {
  var pointTooltipBorderColor = point && 
                                point.options.tooltip &&
                                point.options.tooltip.borderColor,

    seriesTooltipBorderColor = point && 
                               point.series && 
                               point.series.options.tooltip && 
                               point.series.options.tooltip.borderColor,

    borderColor = pointTooltipBorderColor || seriesTooltipBorderColor,
    label = this.label;

  if (label && borderColor) {
    label.attr({
      stroke: borderColor
    });
  }
}
});

Example: http://jsfiddle.net/oLnfqhmn/2/