Programmatically disable and enable tooltips

[stefanbw]

Hi,

I wrote my first Highcharts plugin which allows me to position pins on a chart. The plugin works and it was surprisingly easy to develop. Now I want to enable tooltips for this chart and this is where I'm stuck:

When hovering over a pin, I don't want to get any tooltips. I've tried `stickyTracking`, but this actually not what I want, because I really like the behaviour of this big sensitive area so I don't have to position my mouse over a tiny data point. However, this interferes with the pin which is near by a data pin. I wonder if there is a way to programmatically disable all tooltips which I could call when hovering over a pin.

Thanks for your help

[wojtek]

Hi stefanbw,

I wonder if there is a way to programmatically disable all tooltips which I could call when hovering over a pin.

Yes, there is an approach to make it. Check my demo I posted below where I rendered single circle on the chart. Firstly I used tooltip formatter function to save the active point. On the added circle I added mouseover and mouseout events which change my "closeTooltip" flag (true or false). The last step was to add mousemove events on chart container and if closeTooltip flag equals true destroy tooltip and set a "normal" state on the active point.

Demo:
https://jsfiddle.net/wchmiel/me64z150/

Api reference:
https://api.highcharts.com/class-refere ... VGRenderer
https://api.highcharts.com/class-refere ... Element#on
https://api.highcharts.com/class-refere ... t#setState
https://api.highcharts.com/highcharts/tooltip.formatter

Kind regards.

[stefanbw]

Amazing, let me try this out in a bit.

Just one question, I couldn't find anything about `tooltip.destroy` in the docs which leads me to the question if it's save to use undocumented methods.

[wojtek]

stefanbw,

This approach is a custom functionality, which requires custom code. Tooltip.destroy() method is an interior method of Tooltip object and it is not documented in Highcharts API. However, you can find an explanation in highcharts source code:

Code: Select all

/**
		     * Removes and destroys the tooltip and its elements.
		     *
		     * @function Highcharts.Tooltip#destroy
		     */
		    destroy: function () {
		        // Destroy and clear local variables
		        if (this.label) {
		            this.label = this.label.destroy();
		        }
		        if (this.split && this.tt) {
		            this.cleanSplit(this.chart, true);
		            this.tt = this.tt.destroy();
		        }
		        if (this.renderer) {
		            this.renderer = this.renderer.destroy();
		            H.discardElement(this.container);
		        }
		        H.clearTimeout(this.hideTimer);
		        H.clearTimeout(this.tooltipTimeout);
		    },

Kind regards.

[stefanbw]

It wasn't working properly for me until I've noticed that I missed to implement a `mousemove` handler. I was calling just `destroy` on `mouseover`. Even this shouldn't have a huge impact, it feels hackish to call destroy and setState over and over again. However, there is an issue with this solution. When hovering off a tooltip and going back, it does not show the tooltip again. Any hints are appreciated.

Thanks

[wojtek]

stefanbw,

I added the code that will refresh tooltip and set hover state on point if you move the mouse out of the circle and point state is not equal 'hover'. Now it's working as expected.

Code: Select all

container.addEventListener('mousemove', function(e) {
  if (closeTooltip && activePoint.state === 'hover') {
    activePoint.setState('');
    chart.tooltip.destroy();
  } else if (!closeTooltip && activePoint && activePoint.state === '') {
    activePoint.setState('hover');
    chart.tooltip.refresh(activePoint);
  }
});

Demo:
https://jsfiddle.net/wchmiel/qz8Lwrof/

Kind regards.

[stefanbw]

Amazing. Thanks for your support!

[wojtek]

You're welcome