在 mousemove 上制作多个工具提示

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>

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