javascript - 如何创建多个Tooltips？

Question

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

https://jsfiddle.net/6v1fbrk9/

<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

您需要选择每个“可显示工具提示”的链接，循环遍历它们并将鼠标悬停事件绑定(bind)到每个工具提示内容。也不要使用重复的 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>