2021-11-11el-tooltip提示不消失问题记录

Posted 2023-03-22

参考技术A 问题描述，我的页面使用的是el-table，里面一个列放置了几个按钮，按钮外层包裹了el-tooltip实现hover效果；本来用的是button的title实现的hover效果，但是用户要降低灵敏度，不想让鼠标移入立马显示提示，自己不想写延迟方法就都换成el-tooltip了，因为el-tooltip有个open-delay属性可以直接使用延迟打开提示。换了之后延迟是实现了，但是操作列表中的按钮提示不消失，一滚动就会在页面中滚来滚去不好看。

解决方案：

方案一：style中设置.focusingdisplay: none;这个在我自己写的demo项目里面没有问题，场景比较简单，按钮的事件是弹出confirm和跳转到百度都没有问题。但是在项目中有一个场景有问题然后就又找了方案二

方案二：监听表格的滚动事件，然后设置el-tooltip不显示。参考资料地址：https://blog.csdn.net/baoyin0822/article/details/119824648

closeTooltip()

let list = document.getElementsByClassName('el-tooltip__popper')

if(list.length > 0)

list[list.length - 1].style.display = 'none'



,

以上方法，在mounted中调用this.dom = this.$refs.mytable.bodyWrapper

this.dom.addEventListener('scroll',()=>

this.closeTooltip()

)

但是第二种方法没有滚动调的时候还是不会消失；第一种方案就不会，但是第一种方案在我们项目中有问题，场景比较多可能会有影响。

2021-11-17el-tooltip包裹的按钮禁用时，tooltip提示消失

参考技术A 1.如果el-tooltip直接包裹el-button，当按钮禁用的时候气泡提示会消失；想让按钮禁用的时候提示依然存在，需要再el-button外面嵌套个a标签或者div标签