自定义一个在鼠标移入弹窗时不消失的基于Bootstrap的popover

首先，Bootstrap 弹出框（Popover）插件的用法。

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

请悬停在我的上面

通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

$("[data-toggle='popover']").popover();

当trigger是hover的时候，只要鼠标离开元素，就会隐藏元素的弹出框。但是有时候弹出框里面包含button并且需要点击事件的时候，就没办法实现了。

现在，需求是，实现下面的效果：

1. trigger = hover , 当鼠标 hover 在元素上时触发 popover

2. 当鼠标不再 hover 在元素上且不在 popover 弹出的新层上时弹层关闭

现在的情况：

1. 可以实现 hover 时出现弹窗

2. 鼠标移出元素则关闭，即使鼠标移入到弹窗层中。

有人在github上提出过这个问题，

image

得到了如下回答，

image

简单来说就是，1.设置延时，这种方法实现的效果是，鼠标移到弹出框后弹出框不会马上关闭，但是相应的，鼠标移开也是一样的效果。。。相当于没有解决。

2.不要用hover，推荐click触发，这样的话移动端也能使用。这种方法是比较简单的，但是，需求不是我们能改的。。。。

网上找了很多方法，效果都不是很理想，所以，自己动手吧。。。。

$("[data-toggle='popover']").popover({

html:true,// 为true的话，data-content里就能放html代码了

            trigger:"manual",//设置触发方式为手动

delay: {hide:100},

content:function () {

return '
'

            },

}).on("mouseenter",function () {

var _this =this;

$(this).popover("show");//鼠标悬停到目标元素的时候弹出

// $(this).siblings(".popover").on("mouseleave", function () {

//这样选不知道为啥选不到弹出框，使用下面这种直接选弹出状态的弹出框

            $('.popover.fade.bottom.in').on("mouseleave",function () {

$(_this).popover('hide');//鼠标离开弹出框弹出框消失

});

}).on("mouseleave",function () {

var _this =this;

setTimeout(function () {

if (!$(".popover:hover").length) {

$(_this).popover("hide")

}

},100);//鼠标离开目标元素的时候延时100隐藏弹出框

});