解决Tooltip遮挡Area问题：鼠标悬停Tooltip或其他区域时隐藏Tooltip

我来帮你搞定这个tooltip遮挡区域的问题！你的代码只实现了tooltip的显示逻辑，却没处理各种需要隐藏的场景——比如鼠标离开当前area、切换到其他area，还有鼠标在tooltip上的交互。下面是修改后的完整代码，我会逐一说明关键调整：

完整代码 #

HTML #

<div class="parent">
  <img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
  <map name="image-map">
    <area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
    <area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
    <area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
    <area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
  </map>
  <!-- 把tooltip移到map外面，map标签内的元素不会被渲染 -->
  <div class="tooltip" id="tooltip"></div>
</div>

CSS #

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
  display: none; /* 初始隐藏tooltip */
  padding: 8px; /* 加一点内边距，文字更美观 */
}
.parent {
  position: relative;
}
/* area不需要设置position: relative，因为它是特殊元素，这个设置无效 */

JavaScript #

var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
let tooltipHovered = false; // 标记tooltip是否被鼠标悬停

// 给所有area绑定事件
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener("mouseover", updateTooltip);
  areas[i].addEventListener("mouseout", handleAreaMouseOut);
}

// 给tooltip绑定悬停事件
tooltip.addEventListener("mouseover", () => {
  tooltipHovered = true;
});
tooltip.addEventListener("mouseout", () => {
  tooltipHovered = false;
  // 鼠标离开tooltip后，隐藏它
  tooltip.style.display = 'none';
});

function updateTooltip() {
  // 先隐藏之前的tooltip，再更新内容和位置
  tooltip.style.display = 'none';
  
  // 更新tooltip内容
  tooltip.innerHTML = this.getAttribute('data-text');
  
  // 计算tooltip位置（这里用区域的第一个x坐标和最后一个y坐标，你可以根据需求调整）
  var coordinates = this.getAttribute('coords').split(',');
  tooltip.style.left = coordinates[0] + 'px';
  tooltip.style.top = (parseInt(coordinates[coordinates.length - 1]) + 20) + 'px'; // 向下偏移20px，避免遮挡area
  
  // 显示新的tooltip
  tooltip.style.display = 'block';
}

function handleAreaMouseOut() {
  // 延迟判断，给鼠标从area移到tooltip的时间
  setTimeout(() => {
    // 如果tooltip没被悬停，就隐藏它
    if (!tooltipHovered) {
      tooltip.style.display = 'none';
    }
  }, 100);
}

关键改动说明 #

1. HTML结构调整：把tooltip从<map>标签内移到外面——因为<map>是用于定义图像映射的容器，内部的非<area>元素不会被浏览器渲染，之前的tooltip其实是因为父元素parent是relative才显示的，但规范上应该放在map外。

2. CSS优化：

   • 给tooltip添加display: none，初始状态隐藏。
   • 移除了无效的area { position: relative; }——<area>是特殊的替换元素，这个样式不会生效。
   • 增加了内边距，让tooltip的文字更美观。

3. JavaScript逻辑完善：

   • 新增tooltipHovered变量，跟踪鼠标是否在tooltip上，避免鼠标从area移到tooltip时误隐藏。
   • 给每个area添加mouseout事件，结合延迟判断来隐藏tooltip（延迟是为了给鼠标从area移动到tooltip留时间）。
   • 给tooltip添加mouseover和mouseout事件，更新悬停状态，确保鼠标在tooltip上时tooltip保持显示，离开后隐藏。
   • 在updateTooltip中先隐藏旧tooltip，再更新内容和位置，避免切换area时tooltip重叠。
   • 调整了tooltip的top位置，向下偏移20px，减少对原area的遮挡。

这样修改后，你就可以：

• 悬停area时显示对应的tooltip
• 鼠标离开area但移到tooltip上时，tooltip保持显示
• 鼠标离开tooltip或切换到其他area时，旧tooltip会自动隐藏，不会遮挡其他区域

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