Customize the tooltip

plotly.js
1

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.

2

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.