D3 - Can't get popover to appear at cursor xy coordinate

I'm trying to get nodes to show an adjacent popover when clicked. Here's a codepen on where I'm at: https://codepen.io/SavanaPope/pen/abLdmbz?editors=1000

I've gotten very close, the popover currently shows in the upper-left corner, and is taking in on-click x/y data. It's just not getting the correct cursor location - I'm not sure how it's getting the pixel data currently.

I assume the issue has something to do with the clicknode function:

function clicknode(nodes) {
  const[x, y] = d3.pointer(event);
  tooltip.style("left", (x)+"px")
         .style("top", (y)+"px")
         .transition().duration(200).style("opacity", 0.9)

  loadTooltipContent(nodes);
}

But I just can't figure out where my (likely) formatting is wrong.

If you have any ideas on how to solve this, I'd really appreciate it.

Solution

For D3 V7, rewrite clicknode as follows:

function clicknode(event, nodes) {
  tooltip
    .style("left", `${event.layerX}px`)
    .style("top", `${event.layerY}px`);
}