如何为图片映射（Image Map）区域实现自定义悬浮提示框？

我明白你遇到的问题了——用普通的CSS tooltip方法在image map的<area>元素上完全不起作用，这是因为<area>是个特殊的替换型空元素，没法像普通块级元素那样包含子元素或者用伪元素来实现提示框。别担心，咱们用JS+CSS的组合就能搞定自定义的详细提示框，具体步骤如下：

1. 给Area元素添加自定义数据属性 #

先把每个国家的详细提示内容存在<area>的data-tooltip属性里，用
来实现换行（HTML里直接写换行不会生效）：

<img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
<map name="image-map">
  <area class="tooltip" target="" 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"
        data-tooltip="Country: USA&#10;Shops: Manchester,TN - Num: 6621418372&#10;WIXOM ,MI - Num:662728173">
  <area class="tooltip" target="" 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"
        data-tooltip="Country: MEXICO&#10;Shops: [你的墨西哥店铺信息]">
  <area class="tooltip" target="" alt="JAPAN" title="JAPAN" href="" 
        coords="705,106,716,106,721,146,687,184,667,175" 
        shape="poly"
        data-tooltip="Country: JAPAN&#10;Shops: [你的日本店铺信息]">
  <area class="tooltip" target="" alt="GERMANY" title="GERMANY" href="" 
        coords="418,111,436,108,433,124,418,124" 
        shape="poly"
        data-tooltip="Country: GERMANY&#10;Shops: [你的德国店铺信息]">
</map>
<!-- 全局提示框元素 -->
<div id="customTooltip"></div>

2. 编写提示框的CSS样式 #

给全局提示框设置样式，确保它默认隐藏，悬浮时显示，并且层级足够高：

#customTooltip {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  width: 200px;
  background-color: #222;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  /* 确保换行符生效 */
  white-space: pre-line;
  /* 避免提示框遮挡鼠标事件 */
  pointer-events: none;
}

#customTooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #222 transparent;
}

3. 用JavaScript监听鼠标事件 #

实现鼠标悬浮时显示提示框、移动时跟随鼠标、离开时隐藏的逻辑：

const tooltip = document.getElementById('customTooltip');
const areas = document.querySelectorAll('.tooltip');

areas.forEach(area => {
  // 鼠标悬浮时显示提示框
  area.addEventListener('mouseover', (e) => {
    const tooltipText = area.getAttribute('data-tooltip');
    tooltip.textContent = tooltipText;
    tooltip.style.visibility = 'visible';
    // 初始定位到鼠标右侧
    tooltip.style.left = `${e.pageX + 10}px`;
    tooltip.style.top = `${e.pageY + 10}px`;
  });

  // 鼠标移动时跟随位置
  area.addEventListener('mousemove', (e) => {
    tooltip.style.left = `${e.pageX + 10}px`;
    tooltip.style.top = `${e.pageY + 10}px`;
  });

  // 鼠标离开时隐藏提示框
  area.addEventListener('mouseout', () => {
    tooltip.style.visibility = 'hidden';
  });
});

关键说明 #

• 用data-tooltip存储自定义内容，比原生title属性更灵活，支持换行和复杂格式
• 全局提示框用position: absolute定位，通过JS监听鼠标坐标实时更新位置，避免遮挡地图区域
• white-space: pre-line确保
的换行符能正常显示
• pointer-events: none防止提示框干扰鼠标对<area>元素的事件监听

这样就能实现你想要的自定义详细提示框效果了，亲测有效哦！

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