Hoverinfo touch devices cannot be hidden

plotly.js
1

Hi,

I noticed that on touch devices, when you click on the chart area and the hoverinfo is displayed, there was no way to remove the hoverinfo afterwards.

I there a method to handle this situation?

2

I’m still having the same issue. Is there anything new on this one?

3

hey - I have the same issue. I got some suggestions on my post here

they have not worked for me. Have you figured out a work around?

4

@vrg: Your link seems to lead nowhere.

I’ve found a solution that’s working for me:

There is this (not so well documented) function Plotly.Fx.hover that triggers custom Hover events, see Hover events in JavaScript. You can call it with an empty array to remove all existing hover overlays:

Plotly.Fx.hover(chart, []);

So, what I did, was to add an event listener to my whole document body that calls this function except for cases where the inner plot area (has class xy) is hit:

Plotly.newPlot(chart, ....)
document.body.addEventListener('click', e => {
    const plotArea = chart.getElementsByClassName('xy')[0];
    if (!plotArea.contains(e.target)) {
        Plotly.Fx.hover(chart, []);
    }
});

This way, any click besides the inner plot area removes all currently visible hover overlays while a click on the plot area is handled by Plotly as before (i.e. it creates a new hover overlay while dropping the old one).

5

Thanks :pray: here is the correct link:

I’m trying to build an app in python. Sadly doesn’t seem to be a similar function.