悬停弹出式窗口时，如何保持启动弹出式窗口的生命？

Question

我正在使用twitter boostrap的popover创建一个悬停卡来显示用户信息，并且在mouseover check jsfiddle上触发popover。我想在悬停该弹出窗口时使其保持活动状态。<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>$('#example').popover({        html : true,        trigger : 'manual',        content : function() {            return '<div class="box"></div>';        }    });$(document).on('mouseover', '#example', function(){    $('#example').popover('show');});$(document).on('mouseleave', '#example', function(){    $('#example').popover('hide');});您可以想到facebook悬停卡的工作。我想用同样的方法。我怎样才能做到这一点？

Answer 1

进行细微修改（来自vikas提供的解决方案）以适合我的用例。

1.在弹出事件上为弹出按钮

打开弹出窗口。2.悬停在弹出框上时，使弹出窗口保持打开状态

。3. 在鼠标窗上关闭弹出按钮或弹出框上的弹出窗口。

$('.pop').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);

});

Answer 2

我追求了另一种解决方案...代码如下

    $('.selector').popover({

        html: true,

        trigger: 'manual',

        container: $(this).attr('id'),

        placement: 'top',

        content: function () {

            $return = '<div class="hover-hovercard"></div>';

        }

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

        var _this = this;

        $(this).popover("show");

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

            $(_this).popover('hide');

        });

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

        var _this = this;

        setTimeout(function () {

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

                $(_this).popover("hide")

            }

        }, 100);

    });