How to force tooltip to hide?

[beibean]

Is there any way to force tooltip to hide? At least an elegant way...

The problem I saw is that when touching out of chartjs canvas, tooltip does not get event and thus, it's not hidden.

The events used are like this:

    Chart.defaults.events = ['pointerdown', 'pointerup'];
[...]
    this.chart.options.plugins.tooltip['events'] = ['pointerdown', 'pointerup'];

Before, on chart.js v2.x when I was touching outside canvas, tooltip was hidden, but now it does not hide. Any possibility to achieve the same behaviour?

I attach a video showing what is happening on v3.6.2. When touching outside (like buttons or upper label), tooltip is not hidden. Even, when loading new data, tooltip updates to point the new data...

[Udemology]

Hi Beibean.

I guess your solution will be based on the mousemove event where you measure the position of mouse. If outside of ChartArea hide or set the tooltip to opacity: 0 with makes the tooltip 100% transparent.

Mouse Move event: https://youtu.be/Uj_I2_7o0No
Chart Area Pixels: https://youtu.be/NgCHY3RVhEY

I will try to make something as well. But that there should give you some clues.

[kurkle]

You you don't want to use mousemove/mouseout (as suggested by the events you configured), and you want to remove the tooltip / hover when clicking outside the chart (as suggested by the gif), then you should attack a click listener to the "outside" (body?).

In that handler, you can use the api chartInstance.setActiveElements([]).
Tooltip can be cleared bu chartInstance.tooltip.setActiveElements([]);

[kurkle]

You might need to add a chart.update();
That said, I'm still too lazy to create a reproduction of this to verify 😏

[beibean]

Tested with chart.update() as well and did not solve it.
Anyway, don't worry, I applied the solution commented below.

[kurkle]

There is reason to worry if the official API does not work.
So, I verified and you are right. Chart will replay the last registered event on update and thus replace the active elements.

There are actually 2 bugs, first, it should not replay clicks and 2nd it should clear the _lastEvent in setActiveElements.
https://codepen.io/kurkle/pen/OJxpyqd

[beibean]

Now I can see the bugs you talk about.

I will change to use setActiveElements once the bugs are solved. It seems cleaner to do it this way.

Thank you 😉

[beibean]

Thank you both for suggestions. I finally followed a solution similar to what @kurkle said but with a slightly difference, instead of setting active elements to none, I simulate a fake pointerdown event over chartArea when needed. Doing this, I guess chart.js internally sets active elements to none both for hover and tooltip.

Here is the code i used in case it's useful for someone else:

this.elRef.nativeElement.shadowRoot.getElementById('chart').dispatchEvent(new PointerEvent('pointerdown'));

FYI:

I just tested @kurkle solution as follows, and it's not working.

    this.chart.setActiveElements([]);
    this.chart.tooltip.setActiveElements([], { x: 0, y: 0 });