Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Hiding Plotly's hover text in g.hoverlayer?


Is there a way to hide plotly’s hovertext without disabling the hover event altogether?

I have a plotly bubble chart embedded in an iFrame on an html page. In the html page, I’m using javascript to capture hover events (as done in this example: ) so that I can display the text from the hover text in a div on the web page that’s formatted the way I want. So far, so good. This is working smoothly. I have a div on my page that displays the hover text based on what is being hovered on.

Now the next step is to hide plotyly’s hoverbox. I’ve searched around and seen other people wanting more formatting options, but I haven’t found a simple way to just hide the thing. It seems like it should be possible.

Here’s what I’ve tried:

  • I tried setting “hovermode=False” in the layout options in the Python script that generates the graph, but that eliminates the hover event altogether, so then I can’t capture it on my html page.

  • Next, I tried to hid the hoverbox using css, but I can’t figure out why this isn’t working. Using Chrome’s “Inspect” function, I found the hoverlayer is wrapped in a tag, so I tried to add g.hoverlayer { display: none; } to my stylesheet, but no luck (I’m guessing this has something to do with trying to style something inside an iframe, but I figured if the code appeared in the chrome dashboard, it would be style-able_

Any thoughts on how to keep passing the hover event and text attributes, but simply hide plotly’s hoverlayer?

Thanks so much.

Try setting hoverinfo: 'none' is each of your graph’s traces. I think this will lead to the desired results.

1 Like

Rad. That did it! Thanks so much.

1 Like