# Customize the tooltip

**URL:** <https://community.plotly.com/t/customize-the-tooltip/6414>\
**Category:** plotly.js\
**Created:** [October 20, 2017, 7:10pm UTC](https://community.plotly.com/t/customize-the-tooltip/6414 "2017-10-20T19:10:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![pppw](https://avatars.discourse-cdn.com/v4/letter/p/3be4f8/32.png) [@pppw](https://community.plotly.com/u/pppw)\
**Post date:** [October 20, 2017, 7:10pm UTC](https://community.plotly.com/t/customize-the-tooltip/6414/1 "2017-10-20T19:10:03Z")

</div>

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](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](https://community.plotly.com/t/how-to-customize-plotly-tooltip/332)

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.

---

<div class="post-metadata">

**Author:** ![etienne](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/etienne/32/17_2.png) [@etienne](https://community.plotly.com/u/etienne)\
**Post date:** [October 23, 2017, 1:22pm UTC](https://community.plotly.com/t/customize-the-tooltip/6414/2 "2017-10-23T13:22:17Z")

</div>

Here’s the easiest way to do this: [https://codepen.io/etpinard/pen/NaVrZz?editors=0010](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](https://plot.ly/javascript/hover-events/#triggering-hover-events) shows you how the disable the default hover labels.