Bootstrap的popover鼠标移入弹窗时不消失【亲测】

5月/14日


切图网(qietu.com)专注前端外包,包括bootstrap开发,所以经常也会遇到一些问题比如 [ Bootstrap的popover鼠标移入弹窗时不消失 ] 。

使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了一些网友贡献的方法,不过是需要修改bootstrap的源代码,这是我很抗拒的,所以只有寻找其他方法,下面的方法完美解决:(亲测有用)

为了提高性能,popover是按需加载的,所以当我们需要用到的时候,我们就启用一下,如下:

$(‘[data-toggle=”popover”]’).popover();

 

而调整后的写法如下:

$(‘[data-toggle=”popover”]’).popover({ trigger: “manual” , html: true, animation:false})
.on(“mouseenter”, function () {
var _this = this;
$(this).popover(“show”);
$(“.popover”).on(“mouseleave”, function () {
$(_this).popover(‘hide’);
});
}).on(“mouseleave”, function () {
var _this = this;
setTimeout(function () {
if (!$(“.popover:hover”).length) {
$(_this).popover(“hide”);
}
}, 300);
});

非常简单吧。

切图网始于2007年, 前端外包 服务拓荒者、领航者,提供专业的前端外包服务,微信公众号 qietuwang