Javascript 多个div的鼠标后的工具提示

我目前有一个网站，其中存在数百个跨度，我需要有工具提示。每个工具提示都包含有关每个跨度的重要信息。把它想象成一个联系人簿，其中每个跨距都是联系人的图像，当您将鼠标悬停在图像上时，他们的姓名/联系人信息就会出现

我有它，所以工具提示跟随你的鼠标，虽然它对我来说很好，但在其他一些计算机上，由于跨度太大，工具提示滞后了很多。工具提示需要几秒钟的时间才能出现，而且非常不稳定。数据大小越小，速度就越快。 我在Javascript中尝试的是：

document.body.addEventListener("mousemove", function(e) {
    var x = e.clientX,
    y = e.clientY;

    for(var i = 0; i <  document.getElementsByClassName("tooltip-span").length; i++){
        document.getElementsByClassName("tooltip-span")[i].style.top = (y + 20) + 'px';
        document.getElementsByClassName("tooltip-span")[i].style.left = (x + 10) + 'px';
    }
});

document.body.addEventListener（“mousemove”，函数（e）{
var x=e.clientX，
y=e.clientY；
对于（var i=0；i

这种滞后是无法忍受的，所以我不确定是否有更好的方法来做到这一点。提前谢谢你的帮助

HTML（我正在使用Vue）：

{{item.data.name}

data:{{{item.data.num}
{{item.data.name}

data:{{{item.data.num}

var start=null；
var element=document.getElementById（'SomeElementYouWantToAnimate'）；
功能步骤（时间戳）{
如果（！start）start=时间戳；
var progress=时间戳-开始；
element.style.transform='translateX（'+Math.min（progress/10200）+'px'）；
如果（进度<2000年）{
window.requestAnimationFrame（步骤）；
}
}
window.requestAnimationFrame（步骤）；

---

参考资料：

我相信您想要实现的是，如果在项目上有鼠标移动，您将使用

tooltip2

获取

span。工具提示span

以跟随您的鼠标

由于您使用的是本机实现，请添加我们在下面使用的最接近的方法

document.body.addEventListener("mousemove", function (e) {
  var x = e.clientX, y = e.clientY;
  var container = e.target.closest('.tooltip2');
  if (container && container.querySelector('.tooltip-span')) {
    var target = container.querySelector('.tooltip-span');
    target.style.top = (y + 20) + 'px';
    target.style.left = (x + 10) + 'px';
  }
});

确保在顶部定义最接近的方法 我使用的方法调用与JQuery的想法最接近。我不确定您是否有权访问jQuery，如果您没有使用jQuery，则需要像这样定义最接近的方法

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = 
  function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
          i = matches.length;
          while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement)); 
      return el;
  };
}

---

更新2：使用jquery事件委派

$(document.body).on('mousemove', '.tooltip2', function(e) {
  $(this).find('.tooltip-span').css({left: e.clientX + 10, top: e.clientY +20});
});

---

如果没有更多的信息，我无法确定解决问题的最佳方法是什么。但是这里有几件事你可以试着自己解决，以减少延迟：1）只维护一个工具提示元素，并根据鼠标悬停的元素更改该工具提示的数据。2） 您在所有工具提示元素上以线性时间循环，您可能希望查看javascript对象以减少元素的查找时间。当您在主体上移动时，您需要所有跨度的工具提示？是的，我需要每个跨度的工具提示，根据跨度的不同，一次只能出现一个。你也可以发布html吗？我添加了一些html，我的html相当大，所以这只是我使用工具提示的一个例子。我尝试使用这个工具提示，但结果没有什么不同。不过谢谢。好的，我查过了，根据你的结构，你需要最接近的方法来处理这个问题。我已经更新了答案，希望它能起作用。谢谢你的更新，所以你的修复现在可以让它始终显示工具提示，无论发生什么，但我们回到了第一个问题，它太滞后了。显示工具提示大约需要2秒钟。使用jquery或native？使用nativeI？查看您是否有jquery可以尝试其他jquery代码段吗？

if (window.Element && !Element.prototype.closest) {
  Element.prototype.closest = 
  function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
          i,
          el = this;
      do {
          i = matches.length;
          while (--i >= 0 && matches.item(i) !== el) {};
      } while ((i < 0) && (el = el.parentElement)); 
      return el;
  };
}

$(document.body).mousemove(function(e) {
  var x = e.clientX, y = e.clientY;
  var container = $(e.target).closest('.tooltip2');
  if (container && container.find('.tooltip-span')) {
    var target = container.find('.tooltip-span');
    target.style.top = (y + 20) + 'px';
    target.style.left = (x + 10) + 'px';
  }
});

$(document.body).on('mousemove', '.tooltip2', function(e) {
  $(this).find('.tooltip-span').css({left: e.clientX + 10, top: e.clientY +20});
});