Plotly气泡地图自定义Tooltip坐标匹配问题求助

针对你遇到的自定义Tooltip与地图点不重合、hover事件提前触发的问题，可通过以下方案解决：

1. 明确points[0].bbox的含义 #

points[0].bbox是Plotly返回的hover目标点在图表容器内的边界框坐标，四个属性的具体意义：

• x0：点的左边界横坐标（相对于图表容器）
• x1：点的右边界横坐标（相对于图表容器）
• y0：点的上边界纵坐标（相对于图表容器）
• y1：点的下边界纵坐标（相对于图表容器）
  标准Tooltip的定位逻辑就是基于这个边界框计算的，用它来定位自定义Tooltip能保证和默认Tooltip位置完全对齐。

2. 修复hover事件提前触发问题 #

调整图表的hoverdistance参数，缩小触发hover事件的光标与点的最小距离，让事件仅在光标贴近点时触发，和默认Tooltip的触发时机保持一致：

// 初始化图表时配置参数
Plotly.newPlot('your-chart-id', data, layout, {
  hoverdistance: 5, // 数值越小，需要越靠近点才触发hover
  hovermode: 'closest' // 仅触发距离光标最近的点
});

3. 基于bbox定位自定义Tooltip #

利用bbox计算Tooltip的显示位置，确保和点的位置精准匹配：

// 监听plotly_hover事件
document.getElementById('your-chart-id').addEventListener('plotly_hover', (event) => {
  const point = event.points[0];
  const bbox = point.bbox;
  const customTooltip = document.getElementById('custom-tooltip');

  // 计算Tooltip位置：示例为点的上方居中，避免遮挡目标点
  const centerX = bbox.x0 + (bbox.x1 - bbox.x0) / 2;
  const tooltipX = centerX - customTooltip.offsetWidth / 2;
  const tooltipY = bbox.y0 - customTooltip.offsetHeight - 8;

  // 设置Tooltip内容与显示状态
  customTooltip.innerHTML = `<div>${point.text}</div>`;
  customTooltip.style.left = `${tooltipX}px`;
  customTooltip.style.top = `${tooltipY}px`;
  customTooltip.style.display = 'block';
});

// 监听plotly_unhover事件隐藏Tooltip
document.getElementById('your-chart-id').addEventListener('plotly_unhover', () => {
  document.getElementById('custom-tooltip').style.display = 'none';
});

额外注意事项 #

• 自定义Tooltip的CSS需设置为position: absolute，同时确保图表容器的CSS为position: relative，否则坐标计算会出现全局偏移。
• 地图类图表（如scattermapbox）的bbox坐标逻辑完全适用，无需额外调整。

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