javascript - 使多个工具提示跟随鼠标移动

Question

我在同一个类中有多个跨度，我想使用 mousemove 属性跟随光标。

我尝试过 document.querySelectorAll、document.querySelector、document.getElementById、document.getElementsByClassName、addEventListener...

这是实际的工作代码jsfiddle

window.onmousemove = function (e) {
  var tooltipSpan = document.getElementById('tooltip1');
  var x = e.clientX,
      y = e.clientY;

  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

.para {
  text-decoration: none;
  position: relative;
}
.para span {
  display: none;
}
.para:hover span {
  display: block;
  position: fixed;
  overflow: hidden;
}

.ttip {
  color: white;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0);
  background-color: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

<p class="para">
  Some text <span id="tooltip1" class="ttip">and here is a follower tooltip</span>
</p>
<p class="para">
  Some other text <span id="tooltip2" class="ttip">I want this to follow too, but without defining again for each new span tag</span>
</p>

我得到的最远的是鼠标后面的第一个跨度元素，而不是其他元素。我希望其他标签的工具提示也跟随光标，但无需为我放入页面中的每个新跨度标签再次定义。

Answer 1

我在类上使用 querySelectorAll 执行此操作，然后使用 .forEach() 循环结果元素，没有任何问题

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

  var tooltipSpans = document.querySelectorAll('.ttip');

  tooltipSpans.forEach(tooltipSpan => {
    tooltipSpan.style.top = (y + 20) + 'px';
    tooltipSpan.style.left = (x + 20) + 'px';
  });
}

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

.para span {
  display: none;
}

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

.ttip {
  color: white;
  text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px 0px 0 #000, 0px 1px 0 #000, -1px 0px 0 #000, 0px -1px 0 #000, 1px 1px 1px rgba(0, 0, 0, 0);
  background-color: rgba(50, 50, 50, 0.5);
  border-radius: 5px;
  padding: 10px;
  z-index: 1;
}

<p class="para">
  Some text <span id="tooltip1" class="ttip">and here is a follower tooltip</span>
</p>
<p class="para">
  Some other text <span id="tooltip2" class="ttip">I want this to follow too, but without defining again for each new span tag</span>
</p>

编辑

一些澄清，这里是对正在发生的事情的分割。

var tooltipSpans = document.querySelectorAll('.ttip');

这将返回一个具有类名的 DOM 节点数组ttip

tooltipSpans.forEach(func)

这对数组中的每个元素执行一个函数

tooltipSpan => {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

这是一个箭头函数。它几乎与:

function alignSpan(tooltipSpan) {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

除了范围略有不同之外，请参阅 Arrow Functions了解更多信息。这是缩短函数语法的好方法，特别是当您将它们声明为内联时(例如在 forEach 中)。

这是另一种写法，看起来可能更熟悉。

function alignSpan(tooltipSpan) {
  tooltipSpan.style.top = (y + 20) + 'px';
  tooltipSpan.style.left = (x + 20) + 'px';
}

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

  var tooltipSpans = document.querySelectorAll('.ttip');

  tooltipSpans.forEach(alignSpan);
}