Javascript 使用绝对像素位置在条形图上方显示工具提示？

我想修改这个D3.js示例，以便在用户将鼠标移到其中一个条上时显示工具提示

我已经解决了如何显示相对于用户鼠标指针的工具提示，如下所示：

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 1e-6);
state.selectAll("rect")
  .data(function(d) { return d.ages; })
  ...
  .on("mouseover", function(d, i) {
    tooltip.transition()
      .duration(100)
      .style("opacity", 1);
    tooltip.html("hello world")
     .style("left", x + "px")
     .style("top", y + "px");
  });

// CSS
div.tooltip {
  position: absolute;
  width: 130px;
  height: 60px;
  background: #ddd;
}

但这并不理想，因为它部分地遮住了酒吧。我真正想做的是在所选栏的顶部显示一个工具提示，就像谷歌图表那样：

有人知道我如何获得鼠标的绝对x/y坐标，而不是当前鼠标移动的块的绝对x/y像素坐标吗？然后我可以使用这些坐标来定位工具提示

---

这里是JSFIDLE的开始（但由于访问控制，我无法加载数据）：

当您创建矩形（并在

鼠标上方附加
处理程序）时，您可以在设置它们时访问这些坐标。您所需要做的就是在处理程序中使用它们。只需使用处理程序中设置矩形的坐标。
如何设置？我能想到的唯一方法是在创建时将矩形div上的坐标设置为
data-
属性，这似乎不雅观。与您现在的做法相同，只是
x
和
y
来自鼠标悬停事件。