前言

最近测试提了一个bug，el-tooltip的内容提示错位了，当把鼠标放到某一项时，设置内容会显示出来，此时滚动鼠标提示内容不会消失，造成了该bug。不得不佩服专业的测试呀，下面来看一下解决方法。

原因

碰到bug肯定得找到原因，我们知道el-tooltip在鼠标移到元素上面提示内容，移开就消失，从效果我们可以猜出提示内容的触发事件是鼠标移入与移出事件，具体是哪个事件我们可以看一下源码。

从以上代码我们知道内容显示隐藏是由mouseleave(离开)与mouseenter(进入)两个事件控制，所以此bug产生的原因就是滚动事件未能触发mouseleave事件。注意这是触发元素的事件，提示内容的显示隐藏呢，其实也是一样的。

从以上代码我们可以看到，提示内容显示隐藏是用disable与showPopper控制的，简而言之hide与show是通过改变showPopper的值。具体的shou与hide函数如下：

   show() {
      this.setExpectedState(true);
      this.handleShowPopper();
    },
    hide() {
      this.setExpectedState(false);
      this.debounceClose();
    },
    setExpectedState(expectedState) {
      if (expectedState === false) {
        clearTimeout(this.timeoutPending);
      }
      this.expectedState = expectedState;
    }

函数中用到了setTimeout做了延迟出现，并用debounceClose做了防抖提升性能。大佬们的思路写法我们是可以学习的。

解决

知道了原因，对症下药即可。没有触发mouseleave，我们自己监听滚动事件当作触发事件；提示内容由v-show来控制，那么当滚动条发生滚动，就把提示内容的display属性变为none，相当于人为实现v-show，所以我们加上一下代码就行：

window.addEventListener('scroll', ()=> {
  const eles = document.querySelectorAll('.el-tooltip__popper')
  eles.forEach(item =>{
    item.style.displat= 'none'
  })
});

这样提示内容就会在滚动条滚动时消失。

总结

以上就是el-tooltip滚动不消失问题的解决方法，碰到问题时我们可以去翻翻源码，大概率能学到新知识。