让Bootstrap的popover在鼠标移入弹窗时不消失

转载地址：https://blog.csdn.net/u011125949/article/details/79973801

使用bootstrap的popover，trigger设置为hover时，可以实现当鼠标放置到目标元素上时显示popover，可是无法实现当鼠标移动到popover上时不隐藏popover

解决方案：以在hide.bs.popover事件中使用event.preventDefault()来防止popover关闭

$(".hoverPopover").popover({
        html : true,    
	    delay:{hide:100},  
	    content: function(){
              //调用方法，填充悬浮框内容
              return content();    
	    } 
    }).on('shown.bs.popover', function (event) {
        var that = this;
        $(this).parent().find('div.popover').on('mouseenter', function () {
            $(that).attr('in', true);
        }).on('mouseleave', function () {
            $(that).removeAttr('in');
            $(that).popover('hide');
        });
    }).on('hide.bs.popover', function (event) {
        if ($(this).attr('in')) {
            event.preventDefault();
        }
    });

现在把鼠标移动到popover上时，popover不会隐藏了。
重点：

1. 对popover增加 delay: {hide: 100}，让hide事件等待100毫秒再触发；

2. 在shown.bs.popover事件中为popover元素绑定鼠标事件，在事件中为popover触发元素增加或删除“in”属性；

3. 在hide.bs.popover事件中检查触发元素是否存在“in”属性，如果存在则取消隐藏。