Question

如何为多个班级创建多个工具提示？

<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg"/>

<span id="tooltip-span">

    <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>

Answer 1

您需要选择每个“工具提示”链接，循环它们并将鼠标悬停事件绑定到每个工具提示内容。也不要使用重复的id，使用类。我稍微修改了HTML和CSS（添加z-index）。

这样的事情会起作用：

var tooltips = [].slice.call(document.querySelectorAll('.tooltip'))

tooltips.forEach(function(tooltip) {
  var tooltipSpan = tooltip.querySelector('.tooltip-content');

  tooltip.onmousemove = function(e) {
    var x = e.clientX,
        y = e.clientY;
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
  }
})

.tooltip {
  text-decoration: none;
  position: relative;
}

a.tooltip .tooltip-content {
  display: none;
  z-index: 1000;
}

a.tooltip:hover .tooltip-content {
  display: block;
  position: fixed;
  overflow: hidden;
}

img.hidden {
  display: block;
}

<a class="tooltip" href="http://www.google.com/">
  <img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
  <span class="tooltip-content">
    <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
  </span>
</a>

<a class="tooltip" href="http://www.google.com/">
  <img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
  <span class="tooltip-content">
    <img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
  </span>
</a>

Answer 2

问题不明确。

您是否尝试为单个图片添加多个工具提示？

如果是这种情况，您可以使用图像映射或在您想要工具提示的位置放置background: transparent的div，然后使用工具提示。

Some help from W3 with map

希望这适合你。

如何创建多个工具提示？

2 个答案: