CODEWITHSUNDEEP
javascripteventstooltiphighcharts
Drfrink
Drfrink

Reputation: 404

Have Highcharts tooltip disappear on click

Here is my code example

http://jsfiddle.net/pradeepbhat92/42uUG/

What I'm trying to do is have the tooltip stay on the flag until the user either goes over to another flag or clicks outside of the tooltip/flag. Is this possible with highcharts?

The only clue I've found so far is this line

chart.tooltip.hide=function(){};

Upvotes: 1

Views: 5292

Answers (1)

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

First

Remove display: block from your css.

Second

Revome series inside plotOptions, merge it with flags.

Third

You have to trigger chart.tooltip.hide() on chart click event and not on flag.

chart: {
    renderTo: 'container',
    events: {
        click: function() {
            this.tooltip.hide();
        }
    }
}

Fourth

To prevent the tooltip on the other serie you have to check the serie, if it's the serie you want to prevent you can simple return false.
So, to do it add the following if statement inside the tooltip formatter.

if( this.points && this.points[0].series.options.id == 'dataseries' ) {
    return false;
}

workin demo

Upvotes: 3

Related Questions