如何制作跟随光标的多个工具提示？

Question

我想在一个 HTML 页面中制作多个工具提示，但因为 id 是唯一的，所以我不允许这样做。我该如何更改？

代码示例

<a class="tooltip" href="http://www.google.com/">
Google
<span id="tooltip-reveal">
    <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>

样式示例

 .tooltip {
text-decoration:none;
position:relative;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}

还有 JS，我遇到了麻烦。

var tooltipSpan = document.getElementById('tooltip-reveal');

window.onmousemove = function (e) {
var x = e.clientX,
    y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};

谢谢。

var tooltipSpan = document.getElementById('tooltip-reveal');

window.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;
}

.tooltip span {
display:none;
}

.tooltip:hover span {
display:block;
position:fixed;
overflow:hidden;
}

<a class="tooltip" href="http://www.google.com/">
Google
<span id="tooltip-reveal">
    <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>

Answer 1

您可以使用 class 代替 id，但在查询中更具体：

var tooltipSpans = document.querySelectorAll('a.tooltip>.tooltip-reveal');

window.onmousemove = function(e) {

  tooltipSpans.forEach(function(element, index) {
    let x = e.clientX
    let y = e.clientY;
    element.style.top = (y + 20 * index) + 'px';
    element.style.left = (x + 20) + 'px';
  })

};

.tooltip {
  text-decoration: none;
  position: relative;
}

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

<a class="tooltip" href="http://www.google.com/">
Google
<span class="tooltip-reveal">
    first tooltip
</span>
<span class="tooltip-reveal">
    second tooltip
</span>
</a>

Answer 2

由于 ID 对页面来说是唯一的，因此最好使用类，因为它们可以在整个页面中重复使用。此 JS 查找类而不是 ID。另请注意，链接被设置为一个块，因此它周围有更多空间。

var tooltipSpan = document.getElementsByClassName("tooltip-reveal");

window.onmousemove = function(e) {
  var x = e.clientX,
    y = e.clientY;

  for (var i = 0; i < tooltipSpan.length; i++) {
    tooltipSpan[i].style.top = (y + 20) + 'px';
    tooltipSpan[i].style.left = (x + 20) + 'px';
  }

};

a {
  display: block;
}

.tooltip {
  text-decoration: none;
  position: relative;
}

.tooltip span {
  display: none;
}

.tooltip:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

<a class="tooltip" href="http://www.google.com/">
Google
<span class="tooltip-reveal">
    <img alt="" src="http://www.google.com/images/srpr/logo4w.png" />
</span>
</a>


<a class="tooltip" href="http://www.*.com/">
Stack Overflow
<span class="tooltip-reveal">
    <img alt="" src="https://cdn.sstatic.net/Sites/*/img/apple-touch-icon@2.png?v=73d79a89bded" />
</span>
</a>