score:-1

Try with option enabled with false like :

tooltip: {
    enabled: false,        
  }

Try this FIDDLE

score:-1

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).

score:0

This is jenky but served my purposes

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

score:0

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/

score:0

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:

score:1

You need to set that marker/point default state.

Something like this:

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

score:1

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

score:1

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

jsfiddle sample

score:2

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

score:2

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

score:4

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();

score:6

Please have a look at http://jsfiddle.net/St84H/

You can hide tool tip by

tooltip: {
            enabled: false
        }

Related Query

More Query from same tag