Highcharts Hide tooltip on mouseOver

Question

Hi I have added some functionality to my chart which clones the tooltip when the point is clicked and leaves it displayed on the screen until the point is clicked again which turns it off.

Now what I am trying to do is when I mouse over a point which has already been clicked I don't want another tooltip to been shown from the hover. Basically it creates a duplicate and instead I don't want it to show another tooltip when there is already a cloned one there.

Here is the code for the chart that I have created:

/***************************************************************
 * start of chart_1_1
 ***************************************************************/
chart_1_1_cloneToolTip = null;
chart_1_1_checkx = [];
chart_1_1_cloneFrame = [];
chart_1_1_cloneText = [];
var chart_1_1_Options = {
    chart: {
        type: 'area'
    },
    xAxis: {
        type: 'datetime'
    },
    yAxis: [{
        reversedStacks: false,
    }, {
        opposite: true,
        min:      0,
        labels: {
            formatter: function() {
                return moment.duration(this.value, 'minutes').format('H [h] m [m]');
            }
        }
    }],
    tooltip: {
        shared:    true,
        useHTML:   true,
        formatter: function () {
            var tooltipcontent = '<div id="tooltip_' + this.x + '"><b>' + moment(this.x).format("dddd, D MMMM YYYY") + '</b>';
            var tooltipfooter = '';
            var mySum          = 0;
            tooltipcontent    += '<table style="width: 100%;">';

            var sortedPoints = this.points.sort(function(a, b){
                return ((b.y < a.y) ? -1 : ((b.y > a.y) ? 1 : 0));
            });

            /**
             * we have to loop here as we don't yet know how many series we will have
             */
            $.each(this.points, function () {
                var symbol     = '■';
                var avg_suffix = '';
                if (this.series.name == 'average dwelltime') {
                    tooltipfooter += '<tr><td><br><span style="color:' + this.point.color + '">' + symbol + '</span> '
                                      + this.series.name + ':</td><td style="text-align: right;"><br>' + moment.duration(this.y, 'minutes').format('H [h] m [m]') + '</td></tr>';
                } else {
                    tooltipcontent += '<tr><td><span style="color:' + this.point.color + '">' + symbol + '</span> '
                                      + this.series.name + ':</td><td style="text-align: right;">' + this.y.toLocaleString() + '</td></tr>';
                    mySum += this.y;
                }

            });

            tooltipcontent += '<tr><td><b>Total:</b></td><td style="text-align: right;"><b>' + mySum.toLocaleString() + '</b><td></tr>';
            tooltipcontent += tooltipfooter;
            tooltipcontent += '</table></div>';
            return tooltipcontent;
        }
    },
    plotOptions: {
        line: {
            pointPlacement: 'between'
        },
        area: {
            stacking:  'normal',
            lineWidth: 1,
            marker: {
                lineWidth: 1
            }
        },
        column: {
            borderWidth: 0,
            stacking:    'normal'
        },
        series: {
            cursor: 'pointer',
            marker: {
                enabled: null,
                symbol:  'circle',
                radius:  2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            point: {
                events: {
                    mouseOver: function (event) {
                        console.log(event.target.category);
                        if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {

                        }
                    },
                    click: function (event) {
                        //check if point was already clicked
                        var x = chart_1_1_checkx.indexOf(event.point.x);
                        if ( x >= 0 ) {
                            //remove tooltip
                            $(chart_1_1_cloneFrame[x]).remove();
                            $(chart_1_1_cloneText[x]).remove();

                            //remove x coordinate and clone from array --> tooltip can be displayed again
                            chart_1_1_cloneText.splice(x, 1);
                            chart_1_1_cloneFrame.splice(x, 1);
                            chart_1_1_checkx.splice(x, 1);
                        } else {
                            var chart_1_1_cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true),
                            chart_1_1_cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                            chart_1_1.container.appendChild(chart_1_1_cloneDiv); 
                            chart_1_1.container.firstChild.appendChild(chart_1_1_cloneToolTip);
                            //save coordinates and tooltip object
                            chart_1_1_checkx.push(event.point.x);
                            chart_1_1_cloneFrame.push(chart_1_1_cloneToolTip);
                            chart_1_1_cloneText.push(chart_1_1_cloneDiv);
                        }
                    }
                }
            }
        }
    },
    legend: {
        enabled: true
    }
};

chart_1_1_Options.chart.renderTo  = 'chart_1_1';
chart_1_1_Options.xAxis.plotBands = weekends;
chart_1_1_Options.chart.zoomType  = 'x';

/**
 * initialize the chart
 */
var chart_1_1 = new Highcharts.Chart(chart_1_1_Options);
chart_1_1.showLoading();

This is the code which I am currently focusing on:

point: {
    events: {
        mouseOver: function (event) {
            console.log(event.target.category);
            if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {

            }
        },
        click: function (event) {
            //check if point was already clicked
            var x = chart_1_1_checkx.indexOf(event.point.x);
            if ( x >= 0 ) {
                //remove tooltip
                $(chart_1_1_cloneFrame[x]).remove();
                $(chart_1_1_cloneText[x]).remove();

                //remove x coordinate and clone from array --> tooltip can be displayed again
                chart_1_1_cloneText.splice(x, 1);
                chart_1_1_cloneFrame.splice(x, 1);
                chart_1_1_checkx.splice(x, 1);
            } else {
                var chart_1_1_cloneDiv = this.series.chart.tooltip.label.div.cloneNode(true),
                chart_1_1_cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                chart_1_1.container.appendChild(chart_1_1_cloneDiv); 
                chart_1_1.container.firstChild.appendChild(chart_1_1_cloneToolTip);
                //save coordinates and tooltip object
                chart_1_1_checkx.push(event.point.x);
                chart_1_1_cloneFrame.push(chart_1_1_cloneToolTip);
                chart_1_1_cloneText.push(chart_1_1_cloneDiv);
            }
        }
    }
}

As you can see I am cloning the tooltip on click and I also have another event for mouseOver where I am trying to hide the hover tooltip if there is already a duplicate.

The following code is working, this is checking if there is a clone and this part is working correctly. All I need to do now is hide the tooltip

if (jQuery.inArray(event.target.category, chart_1_1_checkx) != -1) {}

All I need is a line of code in the if statement I specified in my question which hides the tooltip when I hover over it. The if statement is basically saying "There is already a cloned tooltip here so don't bother showing another one when I hover over it"

I have tried the following and none of it works:

this.series.chart.tooltip.hide()
$(this.series.chart.tooltip).hide()
this.series.chart.tooltip.div.hide()

and much more, if you have any ideas please share. I would imagine its going to be a pretty simple one liner but I just can't figure it out. Thanks in advance!

Answer 1

You can simply achieve it by hiding this.series.chart.tooltip.label on mouseOver and show it on mouseOut.

Code:

point: {
  events: {
    mouseOver: function(event) {
      if (jQuery.inArray(event.target.category, chart_1_1_checkx) !== -1) {
        this.series.chart.tooltip.label.hide();
      }
    },
    mouseOut: function(event) {
      if (jQuery.inArray(event.target.category, chart_1_1_checkx) === -1) {
        this.series.chart.tooltip.label.show();
      }
    }
  }
}

Demo:

• http://jsfiddle.net/BlackLabel/qbh6fp1w