在正文标签上添加工具提示不显示d3.js

Question

我正在创建svg图表并尝试添加工具提示，我尝试了所有不同的方法，但似乎没有显示，我可以看到div标签内的信息发生了变化，并且从“ display”：“ none”变为“显示”：“阻止”，但未显示在图表上。感谢您的帮助！

这是我的js：

var innerChartCircle = scatterChartGroup.selectAll("circle")
      .data(fulldata)
      .enter()
      .append("circle")
      .attr("cx", d => xScale(d[CurrentXLabel]))
      .attr("cy", d => yScale(d[CurrentYLabel]))
      .attr("r", 10)
      .attr("fill", "green")
      .attr("opacity", 0.4)
      .attr("stroke", "yellow")
var tooltip = d3.select("body").append("div").classed("tooltip",true);

    innerChartCircle.on("mouseover", function(d,i){
      tooltip.style("display", "block");
      tooltip.html("Hello World")
        .style("left", d3.event.pageX + "px")
        .style("top", d3.event.pageY + "px")
    }).on("mouseout", function(){
      tooltip.style("display", "none")
    })

和CSS：

.tooltip {
  position: absolute;
  width: 80px;
  height: 50px;
  padding: 10px;
  font: 12px sans-serif;
  text-align: center;
  color: white;
  background: blue;
  border-radius: 10px;
  display: none;
}

我真的找不到我做错了什么。