Skip to content

d3_Tooltips positioning using

I’m using d3.js v.6. I have HTML div tooltips:

<div id="tooltip"></div>

appear on the hovering event according this code:

g_points.on("mouseover", function (d, i) {
  "fill", "black");
  "#place").text("Place: " +;
              .style("left","cx") + "px")
              .style("top","cy") + "px")})

I need to slightly shift positioning of #tooltip. I’ve already tested these options which didn’t work:

// .style("left", d3.event.pageX + 20 + "px")
// .style("left", d3.event.pageY - 80 + "px")


// .style("left", d3.mouse(this)[0] + 70 + "px")
// .style("top", d3.mouse(this)[1] + "px")


Try this code (should work with V6):

g_points.on("mouseover", function (e, d, i) {"fill", "black");"#place").text("Place: " +;"#tooltip")
    .style("left", `${e.layerX}px`)
    .style("top", `${e.layerX}px`);