鼠标悬停CSS地图区域时，Tooltip无法正常显示PNG图片求助

尝试实现鼠标悬停CSS地图的path区域时，让Tooltip显示PNG图片，但遇到多种问题：Tooltip直接消失、显示“undefined”，或者图片无法加载。相关代码如下：

document.addEventListener('mouseover', function (e) {
  if (e.target.tagName == 'path') {
    var content = e.target.dataset.name;
    mapDetails.innerHTML = content;
    mapDetails.innerHTML = `<img src="image.png" alt="text for image"/>`
    mapDetails.style.opacity = "100%";
  }
  else {
    mapDetails.style.opacity = "0%";
  }
});

修复方案 #

• 修正图片路径：先确认image.png的路径是否正确。若图片与当前HTML文件同目录，直接写image.png；若在子目录（如images/），需写成images/image.png；使用绝对路径则要填写完整URL。可通过浏览器控制台的Network标签查看图片是否返回404，这是图片找不到的最常见原因。
• 避免innerHTML重复覆盖：代码中先将content赋值给mapDetails.innerHTML，随后立刻用图片HTML覆盖，导致区域名称无法显示。若需同时展示名称和图片，可合并内容：

  mapDetails.innerHTML = `${content}<br><img src="image.png" alt="text for image"/>`;
  

• 移除不必要的HTML转义字符：模板字符串中无需使用<和"这类转义字符，直接写正常的HTML标签即可，否则浏览器会将转义字符当成文本解析，导致图片标签失效。修正后的写法：

  mapDetails.innerHTML = `<img src="image.png" alt="text for image"/>`;
  

• 处理undefined问题：若Tooltip显示“undefined”，说明e.target.dataset.name不存在。检查所有path元素是否正确设置了data-name属性（如<path data-name="区域名称" ...>），或添加默认值避免undefined：

  var content = e.target.dataset.name || '';
  

• 完善Tooltip显示逻辑：若Tooltip直接消失，先确认mapDetails元素是否通过document.getElementById或其他方式正确获取。另外，仅设置opacity: 0%时元素仍占据空间，若需完全隐藏可配合display属性：

  // 显示时
  mapDetails.style.opacity = "100%";
  mapDetails.style.display = "block";
  // 隐藏时
  mapDetails.style.opacity = "0%";
  mapDetails.style.display = "none";
  

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