# 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:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jess\_webber](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jess_webber/32/134560_2.png) [@jess\_webber](https://forum.freecodecamp.org/u/jess_webber)\
**Post date:** [May 13, 2021, 6:14am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/1 "2021-05-13T06:14:24Z")

</div>

Hi, I’m having trouble with the Visualise data with a bar chart challenge. I can’t get the tooltip to display next to the bar I hover over.

I created a rectangle object to start with, and was hoping the position would update with the code I added, but it doesn’t seem to work.

Here’s the codepen: [https://codepen.io/jesswebber/pen/qBrEGNr](https://codepen.io/jesswebber/pen/qBrEGNr)

Any help would be much appreciated.  
Thank you

---

<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 13, 2021, 3:19pm UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/2 "2021-05-13T15:19:56Z")

</div>

Your div in

```auto
.on("mouseover", function(d) {
       div.transition()
         .duration(200)
         .style("opacity", .9);
      div.html("text goes here")
         .style("left", (d3.event.pageX) + "10px")
         .style("top", (d3.event.pageY - 28) + "10px");
      })

```

is undefined. You need to have something like this

```auto
const tooltip = d3.select('#barchart')
      .append('div')
      .attr('id', 'tooltip')
      .style('opacity', 0)

```

You can specify other attributes right in the code or specify them in css. And then you specify tooltip attr and style in ‘mouseenter’

```auto
.on('mouseenter', function (e, d) {
        /* specify tooltip here */
       /* don't forget to assign 'data-date' attr */
})

```

Notice that with v6 D3 we get event e and data d in the callback function. You can use e.pageX and e.pageY for the mouse click point.

```auto
(e.pageX + 10 ) + 'px' //shift 10 pixels to right

```

One last point. Your code

```auto
(d3.event.pageX) + "10px"

```

will end up in a wrong value like “24010px”! It should be

```auto
(d3.event.pageX) + 10 + "px"

```

---

<div class="post-metadata">

**Author:** ![jess\_webber](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jess_webber/32/134560_2.png) [@jess\_webber](https://forum.freecodecamp.org/u/jess_webber)\
**Post date:** [May 14, 2021, 7:56pm UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/3 "2021-05-14T19:56:37Z")

</div>

Thanks very much for your help @twotani . The const tooltip… section helped a lot. I still couldn’t get the mouseenter function to work but eventually settled on this code that worked for me:

```auto
      .on("mouseover", function(event, d) {
      const[x, y] = d3.pointer(event);
      tooltip.attr("visibility", "visible")  
      tooltip.style("opacity", .9);
      tooltip.attr("data-date", d[0])
      const val = d3.format(",.1f")(d[1]);
      tooltip.html("$" + val + " billion" + " " + d[0])
        .style("left", (x) + "px")
        .style("top", (y) + "px");
    })
      .on("mouseout", function(event, d) {
      const[x, y] = d3.pointer(event)
      tooltip.transition()
         .duration(200)
         .delay(100)
      tooltip.style("opacity", 0);
  });

```

---

<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.

---

<div class="post-metadata">

**Author:** ![jess\_webber](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jess_webber/32/134560_2.png) [@jess\_webber](https://forum.freecodecamp.org/u/jess_webber)\
**Post date:** [May 15, 2021, 10:38am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/5 "2021-05-15T10:38:38Z")

</div>

Thanks. Yes, added the “pointer-events: none” line in.  
I just have test 10 left to pass now. Did you manage to pass this?

---

<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 15, 2021, 3:39pm UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/6 "2021-05-15T15:39:15Z")

</div>

You applied yScale when assigning the y position, but you didn’t use xScale for the x position. Your xScale is based on scaleTime, so the x position of the rect needs to match that. This is how I’m assigning the x position

```auto
.attr("x", (d, i) => xScale(dates[i]))

```

My xScale and dates are computed as

```auto
dates = dataset.map((d) => new Date(d[0])); 

xScale = d3.scaleTime()
                    .domain( [d3.min(dates), d3.max(dates)])
                    .range([0, svgWidth]);

```

You need to play around a bit to fit your situation. If you adjust the width and height of svg by adding some padding, that could impact how you assign the x and y values. You will encounter this issue in latter projects too. I played around and made them work, but I now know the importance of defining and applying xScale and yScale properly so everything fits together correctly.

---

<div class="post-metadata">

**Author:** ![jess\_webber](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jess_webber/32/134560_2.png) [@jess\_webber](https://forum.freecodecamp.org/u/jess_webber)\
**Post date:** [May 17, 2021, 5:09am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/7 "2021-05-17T05:09:56Z")

</div>

Thanks! Will see if that works

---

<div class="post-metadata">

**Author:** ![jess\_webber](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jess_webber/32/134560_2.png) [@jess\_webber](https://forum.freecodecamp.org/u/jess_webber)\
**Post date:** [May 17, 2021, 6:55am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/8 "2021-05-17T06:55:45Z")

</div>

Finally passed it so thanks again @twotani for your help!

---

<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 17, 2021, 3:44pm UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/9 "2021-05-17T15:44:12Z")

</div>

Cheers.

I got the “axis and data do not match” errors in all projects. 🤨 😒 So watch out for that and have fun with other D3 projects.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 16, 2021, 3:45am UTC](https://forum.freecodecamp.org/t/d3-bar-chart-tooltip-not-positioning-properly/460101/10 "2021-11-16T03:45:00Z")

</div>

Closed on November 16, 2021, 3:45am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.