Accepted answer

You have two mistakes concerning the tooltip issue.

1) The tooltip is rendering on top of your cursor, you should change the distance to the cursor (40 to 50 was sufficient)

2) You have appended the text in the group of arcs, instead of one group higher in the SVG element. This is why the tooltip gets triggered when you hover over the final arc. You should add the text to svg instead of the arc group.

      let txtLabel = svg
  .on("mousemove", function(d) {
    .style("opacity", .9);
    "<span>"+ "Total" + " : "  + total +"</span>" )
    .style("left", (d3.event.pageX - 50) + "px")
    .style("top", (d3.event.pageY - 50) + "px");

Working example:

Related Query

More Query from same tag