前端同时使用VUE和BOOTSTRAP时，工具提示tooltip失效无法使用的解决方法

左小皓2024-01-08 11:04

先看一下bootstap中tooltip（工具提示）的标准写法

html 复制代码

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

正常使用没有问题，但是如果上面代码是处在VUE作用域内的时候，鼠标移入的时候，是没有提示的，经过研究发现，是因为vue环境中，没有hover事件，导致tooltip没有提示动作。

知道了原因，就有了解决思路，只需要增加上适用于vue的移入移出事件，就可以解决了。

在DOM元素上，有以下几个元素的移入移出事件（解决子元素影响）

mouseenter：指定元素内移入，不会多层嵌套的子元素影响，只触发指定的元素

mouseleave：指定元素内移出，不会多层嵌套的子元素影响，只触发指定的元素

mouseover：指定元素内移入，但是会受指定元素的子元素影响（滑到子元素上时就会触发移出事件）

mouseout：指定元素内移出，但是会受指定元素的子元素影响

在这个应用场景中，我本人推荐使用mouseenter、mouseleave。

优化后的html代码

html 复制代码

<button @mouseenter="enter($e)" @mouseleave="leave($e)" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

在methods中增加两个对应的方法

javascript 复制代码

methods:{
enter:function(e){
//调用bootstrap的tooltip方法就可以了
$(e.target).tooltip('show')

},
leave:function(e){
$(e.target).tooltip('hide')
}
}

经过上面的改造，tooltip终于又回来了！

当然这只是众多解决方法中的一个，仅供参考。