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

Customize the tooltip

Dear plotly.js,

Hello! I’d like to customize the tooltip of scatter plot, instead of showing both (x,y), I’d like to show (x) only. In the following example:

https://codepen.io/anon/pen/VMRGpX?editors=0010

I can see it works as long as you put our mouse on a point and don’t move at all. When the mouse moves a little bit, it goes back to the old value again. Is there another event (other than “'plotly_hover”) to override this behavior? When mouse moves a little bit, the “plotly_hover” is not triggered. Thank you!

There’re some good discussion in this post, but none of them work for my case…
How to customize Plotly Tooltip

Edit: I found a solution, can just set the “hoverinfo” attribute. However for more complicated customization, still not sure how to do. It seems if the mouse doesn’t move a lot, the “plotly_hover” won’t be emitted in the “_hover” function.

Here’s the easiest way to do this: https://codepen.io/etpinard/pen/NaVrZz?editors=0010

In your original codePen, the default hover events are conflicting with your custom handlers. Example https://plot.ly/javascript/hover-events/#triggering-hover-events shows you how the disable the default hover labels.