D3.js技术问题：如何让提示框（Tooltip）显示在选中元素旁？

你分析的问题根源很准确——Tooltip挂载在带滚动的#chart2容器下，但直接使用event.x/event.y（这两个是相对于整个文档的坐标）会因为容器的滚动和定位规则导致偏移。下面是具体的修复方案：

步骤1：修正容器的CSS定位规则 #

首先给#chart2添加position: relative，这样内部的绝对定位元素（Tooltip）会以它为参考系：

#chart2 {
  position: relative; /* 新增，让内部absolute元素以它为基准 */
}
#chart2 .chart { 
  width: 960px; 
  max-height: 900px; 
  overflow-y: scroll; 
  overflow-x: hidden; 
}
.tooltip {
  position: absolute; /* 必须设置，否则left/top无效 */
  pointer-events: none; /* 避免Tooltip干扰鼠标事件 */
}

步骤2：重构Tooltip的坐标计算逻辑 #

在mousemove函数中，我们需要计算光标相对于#chart2容器的相对坐标，同时考虑容器的垂直滚动偏移：

// 创建Tooltip时，去掉重复的class设置（classed已经添加了tooltip类）
var tooltip = d3.select("#chart2")
  .append("div")
  .classed("tooltip", true)
  .style("opacity", 0)
  .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "2px")
  .style("border-radius", "5px")
  .style("padding", "5px")
  .style("position", "absolute") // 确保绝对定位
  .style("pointer-events", "none"); // 防止遮挡鼠标事件

const mousemove = function(event, d) {
  // 获取#chart2容器的位置信息
  const container = document.getElementById("chart2");
  const containerRect = container.getBoundingClientRect();
  
  // 计算相对于容器的坐标：
  // clientX/Y是相对于视口的，减去容器的视口偏移得到容器内相对位置
  // 加上容器的scrollTop，因为滚动后元素的实际位置会偏移
  const relativeLeft = event.clientX - containerRect.left;
  const relativeTop = event.clientY - containerRect.top + container.scrollTop;
  
  tooltip
    .html("The exact value of<br>this cell is: " + d.value)
    .style("left", `${relativeLeft + 10}px`) // +10是让Tooltip稍微偏离光标，避免遮挡
    .style("top", `${relativeTop + 10}px`);
};

额外优化点 #

• 去掉了重复的attr("class", "tooltip")，因为classed("tooltip", true)已经完成了类的添加
• 给Tooltip加上pointer-events: none，防止它挡住下方的矩形元素，导致鼠标事件异常
• 坐标计算中加入了+10的偏移，让Tooltip不会完全覆盖光标，提升交互体验

这样修改后，Tooltip就会正确跟随光标，显示在#chart2容器内的对应位置，不受滚动影响。

内容的提问来源于stack exchange，提问作者Aman