How to programatically hide a tooltip in highcharts?

问题

I am trying to implement highcharts in a mobile application, everything works fine but there is one issue in which on changing orientation from potrait to landscape the tooltip shown for any point selected does not hide on orientation change.

Please suggest me how to hide a tooltip programatically in highcharts ..

I tried the below code:

$('#tankActualUsagechart').highcharts().tooltip.hide();

but this does not hide the marker which i am displaying ...

If there is a way to hide the marker i am fine with that also ..

Please help me on this issue

回答1:

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

You can hide tool tip by

tooltip: {
            enabled: false
        }

回答2:

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

回答3:

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

回答4:

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

回答5:

You need to set that marker/point default state.

Something like this:

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

回答6:

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

回答7:

This is jenky but served my purposes

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

回答8:

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/

回答9:

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

jsfiddle sample

回答10:

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:

回答11:

Try with option enabled with false like :

tooltip: {
    enabled: false,        
  }

Try this FIDDLE

回答12:

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

来源：https://stackoverflow.com/questions/17612630/how-to-programatically-hide-a-tooltip-in-highcharts

标签

jquery

Highcharts