Tooltips not showing on D3 challenge

JavaScript
#1

Tell us what’s happening:
Hi, folks. I’m going through the Data Visualization with D3 challenges, and on the challenge where you add tooltips to elements by appending title elements, nothing seems to change on the page, even after successfully passing the tests. I know I’m meant to see something when I hover over the the rectangle elements, but I don’t know what, or how to make it happen. My code passes all tests and matches the FCC solution given in the challenge guide. Any advice would be appreciated.
Thanks!

Your code so far


<style>
.bar:hover {
  fill: brown;
}
</style>
<body>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  const w = 500;
  const h = 100;

  const svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

  svg.selectAll("rect")
     .data(dataset)
     .enter()
     .append("rect")
     .attr("x", (d, i) => i * 30)
     .attr("y", (d, i) => h - 3 * d)
     .attr("width", 25)
     .attr("height", (d, i) => d * 3)
     .attr("fill", "navy")
     .attr("class", "bar")
     // Add your code below this line
    .append('title')
    .text(d => d)


     // Add your code above this line

  svg.selectAll("text")
     .data(dataset)
     .enter()
     .append("text")
     .text((d) => d)
     .attr("x", (d, i) => i * 30)
     .attr("y", (d, i) => h - (d * 3 + 3))

</script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Add a Tooltip to a D3 Element

Link to the challenge:
https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element

#2

Your code is correct and works. If you hover over a bar and leave the mouse there for a second, the value will show in a small tool tip box with the bar’s value.

#3

Got it, just wasn’t waiting long enough for it to pop up. Thanks!

#4