D3 bar chart w/ react - tests pass but the tooltip isn't showing up at the correct spot

JavaScript
1

codepen

I’ve passed 14/14 tests but my tooltip doesn’t show up where the mouse is. The .on(mouseover) section is pasted below but no matter what I’ve tried the tooltip just shows up centralized under the title.

// create the bars
    svg.selectAll("rect")
     { ... other stuff...}
      // mouse over 
      .on("mouseover", function(e,d) {
        d3.select(this).classed("highlight", true);
        const [x,y] = d3.pointer(e);
        // these print the correct coordinates to the console
        console.log("X: " + x + " Y: " + y);
        console.log(`${e.pageX}px`)
        console.log(`${e.pageY}px`)
        tooltip
          .style("opacity", 1)
          .html(d[0]+ '<br/>' + "$" + d[1])
          .attr("height", "7px")
          .attr("width", "7px")
          .attr("data-date", d[0])
          // HELP
          // I can't figure out why the tooltip is not being placed here
          .style("left", `${e.pageX}px`)
          .style("top", `${e.pageY}px`)
          // This was my other method but also doesn't work
          //.attr('transform', `translate(${x}, ${y})`)
    })

Thanks in advance for any help!!

2

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