javascript - 悬停时在图像上设置工具提示

Question

我有一张 map ，就像谁被坐标映射:

<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">
        
         <area 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">
         
         <area target="" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
         
         <area target="" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
         
</map>

我想像这样使用 css 在悬停时设置信息工具提示，但它不起作用:

<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

我希望它设置如下信息:

国家:美国 商店:田纳西州曼彻斯特 - 编号:6621418372 WIXOM ,MI - 编号:662728173

我怎样才能做到这一点？问候

Answer 1

这是我的解决方案，它不是一个完美的解决方案，但它会给你一个起点。

全屏打开代码段

我正在为每个区域添加 mouseover 事件监听器，然后在悬停时获取它们的坐标

var coordinates = this.getAttribute('coords').split(',') 

这里的this表示area元素

获取坐标后，我将 coords 的第一个和最后一个值应用到 工具提示的左侧和顶部值。

var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener("mouseover", updateTooltip)
}

function updateTooltip() {
  tooltip.innerHTML = this.getAttribute('data-text');
  var coordinates = this.getAttribute('coords').split(',')
  console.log(coordinates[0], coordinates[coordinates.length - 1]);
  tooltip.style.left = coordinates[0] + 'px';
  tooltip.style.top = coordinates[coordinates.length - 1] + 'px';
}

.tooltip {
  position: absolute;
  z-index: 9999;
  border: 1px solid black;
  min-width: 100px;
  max-width: 150px;
  background: white;
}

area {
  position: relative;
}

.parent{
position:relative;
}

<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">
      <div class="tooltip" id="tooltip"></div>   
</map>

</div>