# D3 Bar Chart - tooltip not positioning properly

**URL:** <https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [May 13, 2021, 6:14am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101 "2021-05-13T06:14:24Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![twotani](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/twotani/32/145424_2.png) [@twotani](https://forum.freecodecamp.org/u/twotani)\
**Post date:** [May 14, 2021, 8:33pm UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/4 "2021-05-14T20:33:29Z")

</div>

Glad to hear your code is working. I was also handling mouseover, but I switched to handling mouseenter. Handling mouseenter seems to result in a more stable behavior of the tooltip. When I was handling mouseover, I noticed that moving mouse very quickly sometimes resulted in the tooltip remaining on the screen. I think using either event is fine (as long as we pass the FCC tests 😄).

I forgot to mention that you probably want to set

```auto
pointer-events: none; /* critical to disable mouse */

```

for the tooltip attribute. This is my styling for #tooltip in my CSS file

```auto
#tooltip {
  position: absolute;
  max-width: 200px;
  height: auto;
  padding: 5px;
  color: white;
  background-color: rgb(6, 44, 56);
  border-radius: 5px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none; /* CRITICAL disable mouse */
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
}

```

Several different sources indicated to do this. You might try it and see what happens.

Lastly, a minor point. Since you’re setting opacity, I don’t think you need to set visibility.

---

_[View the full topic](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101)._