How do I add a tooltip to the x-axis labels in highcharts?

Question

How do I add a tooltip to the x-axis labels in highcharts?

xAxis: {
  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
  labels: {
    x: 5,
    useHTML: true,
    formatter: function () {
      return categoryImgs[this.value];
    }
  }
}

Currently, tooltips are only shown on the points in the chart, I want the user to also see a tooltip/custom description when hovering on the labels on x-axis. Is that possible? Thanks

Answer 1

In general Highcharts doesn't support tooltip on labels.

However you have two solutions:

• use Custom-events plugin, to add event on labels: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events (demo has click, mouse over should work the same to display custom tooltip)
• use some plugin (Tooltipsy etc.), like this: http://jsfiddle.net/gW4p6/196/

Answer 2

you can use formatter to make the label as a div. you can write your own jquery museOver event to it.

formatter: function(){
    return "<div class='myClass'> " + this.value + "</div>"
}

I hope this will help you

Answer 3

I think I found a simpler solution to this question that just involves Bootstrap and JQuery.

See http://jsfiddle.net/key2xanadu/zfsfz0c9/.

The solution involves ID tagging the puppies and then tooltipping them at the bottom:

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

Example also shows how to add tooltips to the title!