wakki
Posts: 2
Joined: Thu Jul 14, 2022 11:38 am

How to remain to show tooltip even when mouseout to outside of the graph component

Hi there, I was wondering if anyone could help me out!

### What I want to do
Disable to hide the tooltip when mouseout, instead I'd like to hide it on click.

### Step
1. When hovering over a point in the graph, the tooltip comes up.
2. When moving a cursor(mouseout) outside of the graph component

### Expected behavior
Still remain to show the tooltip. And enable to hide it by clicking.

### Actual behavior
Hide the tooltip on mouseout.

### Code
https://stackblitz.com/edit/react-start ... le=App.tsx

### Gif

![demo](https://gyazo.com/4fa944c5ccad77034d88c2ca54593f96)


Thank you so much in advance!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: How to remain to show tooltip even when mouseout to outside of the graph component

Hello wakki!
Welcome to our forum and thanks for contacting us with your question!

I think the easiest way to stop disappearing tooltip when moving the mouse out of the chart will be to disable the method responsible for hiding tooltip using these lines:

Code: Select all

Highcharts.Pointer.prototype.reset = function () {
      return undefined;
};
To hide the tooltip on the click anywhere on the page you can add an event listener in useEffect hook where you have access to chart reference and just call tooltip.hide method.

Demo: https://stackblitz.com/edit/react-start ... ipt-7w23pb
API Reference: https://api.highcharts.com/class-refere ... oltip#hide

Let me know if you have any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”