How to show values in a tooltip

Question

I've built a network graph and I want to show the information from the data source in my tooltip based on the circle you hover over. Currently, my hover action to turn the circle red works, but my tooltip just shows the same value regardless of where you hover. I'm confused as to where I'm going wrong and how to rectify this. Any help would be appreciated. Here's my code below:

  const node = svg.append("g")

    .selectAll("circle")
    .data(nodes)
    .join("circle")
    .attr("r", 0.4)
    .attr("fill", "#f2d974")
    .attr("fill-opacity", 0.4);

simulation.on("tick", () => {
  link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);

  node
      .attr("cx", d => d.x)
      .attr("cy", d => d.y);
});

var tooltip = d3.select("#france")
.append("div")
.data(nodes)
.style("position", "absolute")
.style("visibility", "visible")
.style("background", "white")
.style("border", "solid")
.style("border-width", "0.5px")
.style("border-radius", "5px")
.style("padding", "5px")
.style("width", "100px")
.style("height", "100px")
.text(d=>d.id)
console.log(d=>d.id)

node
.on("mousemove", function(d){
    console.log(d)
  d3.select(this).style("fill", "red")
  
  tooltip.style("visibility", "visible")
    .style("top", (event.pageY))
    .style("left", (event.pageX))
    .text(d=>d.id)
})
.on("mouseout", function(){
    tooltip.style("visibility", "hidden")
})

Answer 1

You are always seeing the same value because you are using the data element from the tooltip:

tooltip.style("visibility", "visible")
    .style("top", (event.pageY))
    .style("left", (event.pageX))
    .text(d=>d.id) // -> this is the d.id binded to the tooltip

Your issue is a shaded variable

Can you try this code and let me know if it works:

tooltip.style("visibility", "visible")
    .style("top", (event.pageY))
    .style("left", (event.pageX))
    .text(d.id)