如何解决鼠标移动时tooltip无法跟随鼠标位置移动的问题

你的代码存在两个核心bug，导致tooltip无法跟随鼠标移动：

1. DOM选择器使用错误：document.querySelector('.toolhere + section') 仅会返回匹配规则的第一个DOM元素，返回值不是节点集合，不存在length属性，后续遍历更新位置的for循环完全不会执行，位置更新逻辑从未生效。
2. 事件绑定逻辑不合理：将mousemove事件绑定在全局window上，即便修复选择器问题，也会同时更新页面所有tooltip（包括处于隐藏状态的）的位置，既浪费性能，也容易出现样式冲突。
3. CSS写法存在冗余：hover状态下才设置position: fixed会导致元素显示时定位属性切换，容易引发布局跳动；滥用!important强制提升优先级也会增加后续维护成本。

直接替换对应部分的代码即可，原有HTML结构无需改动。

JavaScript代码 #

// 获取所有tooltip触发元素
const tooltipTriggers = document.querySelectorAll('.toolhere');

tooltipTriggers.forEach(trigger => {
  // 拿到当前触发元素相邻的tooltip节点
  const currentTooltip = trigger.nextElementSibling;
  // 仅当鼠标在当前触发元素上移动时，更新对应tooltip的坐标
  trigger.addEventListener('mousemove', (e) => {
    const offsetX = 3;
    const offsetY = 3;
    currentTooltip.style.left = `${e.clientX + offsetX}px`;
    currentTooltip.style.top = `${e.clientY + offsetY}px`;
  })
})

CSS代码 #

.toolhere {
  position: relative;
}

.toolhere + section {
  display: none;
  background-color: #ECECEC;
  color: #4D4E53;
  padding: 4px 8px 4px 9px;
  font-size: 12px;
  /* 提前设置fixed定位，避免显示时属性切换导致跳动 */
  position: fixed;
  /* 禁止tooltip响应鼠标事件，避免遮挡触发元素导致hover闪烁 */
  pointer-events: none;
}

.toolhere:hover + section {
  display: block;
}

原有HTML结构（可直接复用无需修改） #

<div class="items">
  <div class="sub-content">
    <div class="iconsize toolhere">
      <img src="https://via.placeholder.com/100.jpg" />
    </div>
    <section class="tooltip">this is tooltip</section>
  </div>
  <div class="sub-content">
    <div class="content-name toolhere"></div>
    <section class="tooltip">this is tooltip</section>
  </div>
</div>

• 事件绑定粒度更细：只在鼠标悬停到对应触发元素时才执行位置更新逻辑，相比全局监听mousemove性能损耗更低
• 修复了定位属性切换导致的显示跳动问题
• 新增pointer-events: none解决了tooltip遮挡鼠标引发的闪烁、hover失效问题
• 移除了所有非必要的!important规则，样式优先级逻辑更清晰

内容的提问来源于stack exchange，提问作者Manjunath L