如何自定义HTML图像映射area标签title属性的悬浮提示样式

首先明确：浏览器原生title属性生成的默认Tooltip完全由浏览器内核控制，没有开放任何CSS/JS自定义接口，无法直接修改其样式，直接自定义原生title提示的路径走不通，推荐通过自定义提示层+热区事件监听的方式实现，样式可以100%自主控制。

实现注意点 #

• 原有代码中<map>标签内部嵌套<div>不符合HTML规范，<map>仅允许直接嵌套<area>元素或合法块级容器，需要删除多余的无效嵌套
• 不要把提示内容放在title属性上，否则会同时弹出浏览器原生提示和自定义提示，造成冲突，提示内容统一存在data-tooltip自定义属性上即可

完整实现代码 #

<style>
/* 图片容器设置相对定位，作为提示层的定位基准 */
.img-container {
  position: relative;
  display: inline-block;
}
/* 自定义提示层样式，所有外观属性都可以按需修改 */
.hover-tip {
  position: absolute;
  display: none;
  max-width: 340px;
  padding: 12px 16px;
  background: #222;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 9999;
  pointer-events: none; /* 防止提示层遮挡鼠标，影响热区事件触发 */
  white-space: pre-line; /* 自动识别文本内的换行符 */
}
</style>

<div class="img-container">
  <img src="https://i.ibb.co/x11LcrM/team.png" usemap="#team-map" />
  <!-- 全局复用的自定义提示层 -->
  <div class="hover-tip" id="tipBox"></div>
  <map name="team-map">
    <area
      target="_blank"
      alt="leftGirl"
      data-tooltip="What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
      href="https://www.webs.com/themes"
      coords="59,669,21,848,75,1151,12,1439,288,1448,568,1446,548,1008,474,691,426,612,400,341,301,281,198,367,161,618"
      shape="poly"
    />
    <!-- 后续新增热区只需要加area标签，配置对应data-tooltip即可，无需修改JS -->
  </map>
</div>

<script>
const tipBox = document.getElementById('tipBox');
const container = document.querySelector('.img-container');
const allAreas = document.querySelectorAll('area');

allAreas.forEach(area => {
  // 鼠标移入热区：填充内容、显示提示层
  area.addEventListener('mouseenter', e => {
    tipBox.textContent = e.target.dataset.tooltip;
    tipBox.style.display = 'block';
  })

  // 鼠标在热区移动：实时更新提示层位置（默认跟随鼠标，偏移12px）
  area.addEventListener('mousemove', e => {
    const offset = 12;
    const containerRect = container.getBoundingClientRect();
    tipBox.style.left = `${e.clientX - containerRect.left + offset}px`;
    tipBox.style.top = `${e.clientY - containerRect.top + offset}px`;
  })

  // 鼠标移出热区：隐藏提示层
  area.addEventListener('mouseleave', () => {
    tipBox.style.display = 'none';
  })
})
</script>

可扩展方向 #

• 如果不需要提示跟随鼠标，可以解析<area>的coords坐标计算热区中心/边界位置，把提示层固定在热区的指定方位
• 需要富文本提示（带图片、链接、格式排版）时，把textContent赋值改成innerHTML，在data-tooltip里写对应HTML内容即可
• 可以给提示层增加淡入淡出动画、小箭头等效果，只需要修改对应CSS即可，没有样式限制

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