如何在SVG图片热区中添加内含超链接的悬停tooltip提示框

实现思路说明 #

你选择的SVG实现方案是性价比最高的，既不需要引入复杂的D3库，也比传统HTML <map> 标签的响应式适配更简单，核心逻辑是利用SVG的矢量特性，让热区坐标跟随地图自动缩放，配合自定义Tooltip实现需求。

现有代码优化点 #

• 热区视觉隐藏：将原示例中蓝色rect的填充样式改为透明，仅保留交互能力，不会遮挡底层地图
• 支持Tooltip内嵌超链接：原showTooltip函数的第二个参数支持直接传入HTML字符串，直接写入超链接标签即可实现跳转能力
• 修复Tooltip链接无法点击的问题：原逻辑移出热区就隐藏Tooltip，会导致用户无法点击Tooltip内的内容，需要增加延迟消失逻辑，同时给Tooltip本身绑定鼠标事件，悬浮时保持显示
• 响应式适配：你现有SVG已经配置了viewBox和preserveAspectRatio属性，仅需要给SVG父容器设置宽度100%，即可实现全尺寸响应式，热区位置不会因为屏幕尺寸变化错位

完整实现代码 #

CSS部分 #

#tooltip {
  position: absolute;
  display: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 9999;
  max-width: 200px;
}
#map svg {
  width: 100%;
  height: auto;
}
.map-hotspot {
  fill: transparent;
  opacity: 0;
  cursor: pointer;
}

JS部分 #

let hideTimer = null;

function showTooltip(evt, content) {
  // 清除未执行的隐藏定时器
  if (hideTimer) {
    clearTimeout(hideTimer);
    hideTimer = null;
  }
  const tooltip = document.getElementById("tooltip");
  tooltip.innerHTML = content;
  tooltip.style.display = "block";
  // 调整位置避免超出可视区域
  const tooltipWidth = tooltip.offsetWidth;
  const tooltipHeight = tooltip.offsetHeight;
  const pageWidth = window.innerWidth;
  const pageHeight = window.innerHeight;
  let left = evt.pageX + 10;
  let top = evt.pageY + 10;
  if (left + tooltipWidth > pageWidth) left = evt.pageX - tooltipWidth - 10;
  if (top + tooltipHeight > pageHeight) top = evt.pageY - tooltipHeight - 10;
  tooltip.style.left = left + 'px';
  tooltip.style.top = top + 'px';
}

function hideTooltip() {
  // 延迟300ms隐藏，给用户移动鼠标到Tooltip的时间
  hideTimer = setTimeout(() => {
    const tooltip = document.getElementById("tooltip");
    tooltip.style.display = "none";
  }, 300);
}

// 页面加载完成后给Tooltip绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const tooltip = document.getElementById("tooltip");
  // 悬浮在Tooltip上时保持显示
  tooltip.addEventListener('mouseenter', () => {
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  });
  // 移出Tooltip时隐藏
  tooltip.addEventListener('mouseleave', hideTooltip);
})

HTML部分 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图热区Tooltip</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 引入上面的CSS样式 -->
  <style>
    /* 这里放上面的CSS代码 */
  </style>
</head>
<body>
  <div class="container">
    <div id="tooltip"></div>
    <figure id="map">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet">
        <image width="100%" href="你的地图图片地址"></image>
        <g>
          <!-- 示例热区：对应某餐馆位置 -->
          <rect class="map-hotspot" x="200" y="300" width="80" height="120" 
            onmousemove="showTooltip(evt, '<p>川味小馆</p><p>评分：4.8分</p><a href="/restaurants/1001" target="_blank">查看门店详情</a>')" 
            onmouseout="hideTooltip()">
          </rect>
          <!-- 可以添加更多热区，支持rect/polygon/path等任意SVG形状 -->
        </g>
      </svg>
    </figure>
  </div>
  <!-- 引入上面的JS代码 -->
  <script>
    /* 这里放上面的JS代码 */
  </script>
</body>
</html>

扩展说明 #

如果需要不规则形状的地理热区，可以直接替换rect标签为polygon或path标签，事件绑定逻辑完全一致；如果热区数量较多，可以把所有热区的坐标、内容、跳转地址存储为JSON数组，用JS批量生成热区元素，减少重复代码。

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