手机端实现Tooltip (Hover)

Posted 2023-03-20

参考技术A 首先参考了这篇文章： 5行JS自定义title提示效果（Tooltip）

参考后实现如下：
html: 用了angularjs的ng-repeat

css:

然后发现iPhone手机点击后仍然不显示提示文字。
参考了这篇文章解决了问题。 苹果手机无法识别hover的解决方案

在html页面后面加上

在实现过程中又找到了几个现成的插件亲测可用：
Microtip.css 纯css3 Tooltip工具提示样式
Hint.css 纯CSS实现的Tooltip提示 - Hint.css
纯css3 Tooltip工具提示样式
tootik

之前还尝试使用过jquery-ui的Tooltip，iPhone也是不好用但是发现这篇文章非常好。
解决 Jquery UI Tooltip 用在Select 的BUG

这是我用jquery-ui时的写法，因为给所有document都响应tooltip事件，导致只要有title的都会显示。

文章里这种改法可以过滤我们想要响应hover的到底是什么元素。

这部分内容jQuery-UI 控件上是没有说的，非常有用。

这篇文章没细看
ontouchstart实现手机触屏中的hover效果

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

参考技术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()

)

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