[Solved]-How to programatically hide a tooltip in highcharts?-Highcharts

try with option enabled with false like :

tooltip: {
    enabled: false,        
  }

try this fiddle

you can use the chart.mytooltip.destroy() method to remove the tooltip manually. for example:

var mychart = new highcharts.chart({ /* ... */ });
mychart.mytooltip.destroy();

this will remove the current instance, and it will reappear the next time you hover on a point (or whatever action the user would take to show the tooltip).

this is jenky but served my purposes

$(document).ready(function(){
  $('.highcharts-container text:last').hide()
})

try this if you need at run time.

chart.tooltip.hide();

it worked for me http://forum.highcharts.com/highcharts-usage/tooltip-how-to-show-hide-tooltips-onblur-t5926/

you can use the update function

    var mychart = $('#container').highcharts();

for disable tooltip:

    mychart.update({tooltip: {enabled: false}});

for enable tooltip:

    mychart.update({tooltip: {enabled: true}});

check this jsfiddle:

you need to set that marker/point default state.

something like this:

chart.series[0].data[index_of_tooltip_point].setstate("");

try and use below code:

$(function () {
    var chart = new highcharts.chart({
        chart: {
            renderto: 'container'
        },

        plotoptions: {
            series: {
                events: {
                   click: function(e) {
                        enabledtooltip();
                    }
                }
            }
        },

        tooltip: {
            crosshairs: [{
                dashstyle: "solid"
            }, false],
             enabled: false
        },

        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]        
        }]
    });



    var enabledtooltip = function(){
alert(567);
        var options = chart.options;
        options.tooltip.enabled = true;
   chart = new highcharts.chart(options);
};

});

hope this works for you

i use chart.pointer.reset() for removing marker and tooltip during legenditemclick and it works like a charm

jsfiddle sample

i looked through a lot of forums and nowhere i found very easy way to show/hide a tooltip like tooltip.enable = true/false. the good way i came to is to set tooltip setting through formatter in the initialization of chart.

var barsshowen - is a global variable that has a necessary state - true/false - show tooltip or not.

this example will work in my project www.tanks-vs.com after the beginning of dec 2014. you could see.

tooltip: {

    shared: true,
    usehtml: true,

    formatter: function() {

        if (barsshowen) {

            var s = '<span><b>' + this.x + '</b></span><table>';

            $.each(this.points, function () {
                s += '<tr><td align = "left" style = "color:' + this.series.color + ';">' + this.series.name + ': ' +'</td>' +
                    '<td><b>'+  this.y +'</b></td></tr>' ;
                });


            return s+'</table>';
        } else {
            return false;
        }
}

you have to provide formatter function. the trick is to return false when you do not want to show anything

here is a little test

html page -

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id='toggletooltip'>toggle tooltip</button>

js code -

$(function () {
$('#container').highcharts({
    title: {
        text: 'tooltip enabled is set to false'
    },

    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: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]
    }]
});

$('#toggletooltip').click(function () {
    var tooltipoptions = $('#container').highcharts().tooltip.options;
    if ($(this).hasclass('enabled')) {
        tooltipoptions.formatter = null;
        $(this).removeclass('enabled');
    } else {
        tooltipoptions.formatter = function () {
            return false;
        }
        $(this).addclass('enabled');
    }
 });
});

see live here

as long as you have a reference to the highcharts chart object, you can hide the tooltip like so:

// create chart
var mychart = new highcharts.chart({ /* snip */ });

// hide tooltip
mychart.tooltip.hide();

please have a look at http://jsfiddle.net/st84h/

you can hide tool tip by

tooltip: {
            enabled: false
        }