Question

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

代码示例

df$couple = with(df, ifelse(partner_id != 0 & partner_id != persid, 1, 0))

样式示例

<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>

和我遇到麻烦的JS。

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

.tooltip span {
display:none;
}

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

谢谢。

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

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.stackoverflow.com/">
Stack Overflow
<span class="tooltip-reveal">
    <img alt="" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />
</span>
</a>

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

2 个答案: