Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels? Here is the Fiddle where I am trying to add tooltip to y-axis lables Code:

$(function(){
var chart1;
$(document).ready(function(){
var options = {
    colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
    chart: {
        renderTo: 'container',
        type: 'bar',
        backgroundColor: 'black',
        borderColor: 'black',
        borderWidth: 0,
        className: 'dark-container',
        plotBackgroundColor: 'black',
        plotBorderColor: '#000000',
        plotBorderWidth: 0
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Count Per Category',
        style: {
            color: 'white',
            font: 'normal 22px "Segoe UI"'
        },
        align: 'left'
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        style: {
            color: '#F0F0F0'
        }
    },
    categories: {
        enabled: 'true'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        itemStyle: {
            font: '9pt Segoe UI',
            color: 'white'
        },
        itemHoverStyle: {
            color: 'grey'
        }
    },
    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            style: {
                color: 'white'
        }
    },
        title: {
            enabled: false
        },
        gridLineColor: '#222222'
    },
    yAxis: {
        title:
        {
            enabled: true,
            text: "Document Count",
            style: {
                fontWeight: 'normal',
                color: 'white'
            }
        },
        labels: {
            style: {
                color: 'white'
        }
    },
        gridLineColor: '#222222'
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            cursor: 'pointer'
        }
    },
    series: []
};

options.series = [{
        data: [3, 4, 4, 3, 9]
    }];

chart1 = new Highcharts.Chart(options);
});
})

For each category, I have a tooltip like: cat1: descrption1 cat2: descrption2 cat3: descrption3 cat4: descrption4

When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

Trying to show description about y-axis labels as tooltip.
Is it possible to show corresponding tooltips on y-axis labels? Here is the Fiddle where I am trying to add tooltip to y-axis lables Code:

$(function(){
var chart1;
$(document).ready(function(){
var options = {
    colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
    chart: {
        renderTo: 'container',
        type: 'bar',
        backgroundColor: 'black',
        borderColor: 'black',
        borderWidth: 0,
        className: 'dark-container',
        plotBackgroundColor: 'black',
        plotBorderColor: '#000000',
        plotBorderWidth: 0
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Count Per Category',
        style: {
            color: 'white',
            font: 'normal 22px "Segoe UI"'
        },
        align: 'left'
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        style: {
            color: '#F0F0F0'
        }
    },
    categories: {
        enabled: 'true'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0,
        itemStyle: {
            font: '9pt Segoe UI',
            color: 'white'
        },
        itemHoverStyle: {
            color: 'grey'
        }
    },
    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            style: {
                color: 'white'
        }
    },
        title: {
            enabled: false
        },
        gridLineColor: '#222222'
    },
    yAxis: {
        title:
        {
            enabled: true,
            text: "Document Count",
            style: {
                fontWeight: 'normal',
                color: 'white'
            }
        },
        labels: {
            style: {
                color: 'white'
        }
    },
        gridLineColor: '#222222'
    },
    exporting: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            cursor: 'pointer'
        }
    },
    series: []
};

options.series = [{
        data: [3, 4, 4, 3, 9]
    }];

chart1 = new Highcharts.Chart(options);
});
})

For each category, I have a tooltip like: cat1: descrption1 cat2: descrption2 cat3: descrption3 cat4: descrption4

When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

• javascript
• jquery
• highcharts

• What have you tried before? We don't do your work, we just help you ;) Can you provide a jsfiddle? – 23tux Commented Jan 3, 2014 at 11:10
• Can you show what you have tried? Provide a body of code that produces a sample graph that people can then change to include what you're asking for? – Rob Baillie Commented Jan 3, 2014 at 11:13
• What is "description1" for "cat1" ? Right now I am seeing "Series1 : 3" so for "cat1" description is "3" ? – Dhanu Gurung Commented Jan 3, 2014 at 11:23
• your code works for mouse hovering on bar or line, i need the tooltip when hovered on axis label."description3" is some text and not "3". – Srinivas Commented Jan 3, 2014 at 11:30

3 Answers 3

Use formatter with HTML enabled for labels: http://jsfiddle/W5wag/2/

    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() {
                return '<span title="My custom title">' + this.value + '</span>';
            },
            useHTML: true,
            style: {
                color: 'white'
            }
        }
    },

Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.

Extending Paweł Fus' solution I define the label and title text by delimiting the values for categories using ' - '. The value can then be split into an array by the formatter to display the first array value as the label and the second array value as the title text: http://jsfiddle/wqpckxL7/

xAxis: {
        categories: ['cat1 - the first and best category', 
                     'cat2 - this category is less popular', 
                     'cat3', 
                     'cat4', 
                     'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() {                    
                // split using -
                var values = this.value.split(" - ");
                // check we have more than 1 value
                if (values.length > 1) {                                                
                    // use first item in the array as the displayed label and the second for the title text
                    return '<span title="' + values[1] + '">' + values[0] + '</span>';                        
                } else {
                    // if only one value then format as normal
                    return this.value;
                }                    
            },
            useHTML: true,
            style: {
                color: 'white'
            }
        },           
    }    

Add pointFormat property to your tooltip object as:

tooltip: {
  .....,
  .....,
  pointFormat: '<b>{point.y}</b>',
}

DEMO Link: