在 mousemove 上制作多个工具提示

Question

我在同一个类中有多个跨度，我想使用 mousemove 属性跟随光标。我尝试过 document.querySelectorAll、document.querySelector、document.getElementById、document.getElementsByClassName、addEventListener...这是实际的工作代码jsfiddlewindow.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 标签再次定义。