Highcharts - only show tooltip when hovering directly on point

Question

The default experience for highcharts seems to be that the closest point to your cursor (horizontally) is in a hover state. This means that a tooltip is triggered when you get more than halfway toward the next point in the line. I want to have a tooltip trigger when I hover directly over a point, and then remain active until I hover directly over a different point.

Here is a fiddle of the issue, with the corresponding code below:

http://jsfiddle.net/qNLu2/

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
    }]
});

});

Answer 1

Using the HighCharts options you can set the following to achieve the effect you want:

plotOptions: {
    series: {
        stickyTracking: false
    }
},
tooltip: {
    snap: 0
}

This will cause the tooltip to trigger only when the mouse is directly over the point and turn off when the mouse leaves the point. The only problem with this is that the fade out animation (i.e. snap: 0) takes some time, but you should be able to change the animation time. I haven't found it yet though.