Highcharts with shared and split tooptip, Is there any possible to style the hover xAxis labels?

问题

Expect: set my custom style on the xAxis labels, and cancel the 'default' style(see below fiddle) once hover out.

fiddle

Tried:

tooltip: {
  useHTML: true
}


.test {
  background-color: red;
}

Yes, I can set the style now, but the 'default' style can't be canceled, the default style 'stay' once mouseover happens especially on a narrow screen.

BTW, I did this to keep the tooltip with overwriting the Highcharts.hide function (Thanks to StackOverflow too):

    (function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function () {
        });
    }(Highcharts));

To visualize this problem with clear, I post some image:

回答1:

You can wrap Highcharts.Tooltip.prototype.renderSplit(labels, points) method and at the end overwrite the tooltip attributes.

Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function(p, labels, points) {
  p.call(this, labels, points);

  var tt = this.tt;

  if (tt) {
    // overwriting tooltip box attrs
    tt.attr({
      padding: 20,
      fill: 'red',
      stroke: 'blue',
      'stroke-width': 3,
      r: 4
    });

    // changing the position of the text inside the box
    tt.text.attr({
      y: 50
    })
  }
});

For changing text style, you can use tooltip.headerFormat property.

tooltip: {
  split: true,
  headerFormat: '<span style="font-size: 30px; color: white">{point.key}</span>'
},

example: http://jsfiddle.net/n903143x/

来源：https://stackoverflow.com/questions/41673027/highcharts-with-shared-and-split-tooptip-is-there-any-possible-to-style-the-hov