在悬停弹出式窗口时，如何保持启动弹出式窗口的生命? [英] How can I keep bootstrap popover alive while the popover is being hovered?

问题描述

我正在使用twitter boostrap的弹出框创建一个悬停卡以显示用户信息，并且在鼠标悬停检查上触发弹出框 jsfiddle这里 .我想在悬停该弹出框时使其保持活动状态.

I am using twitter boostrap's popover to create a hover card to show user info, and I am triggering popover on mouseover check jsfiddle here. I want to keep this popover alive while it being hovered.

<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悬浮卡的工作.我想用同样的方法.我该怎么办?

You can think of working of facebook hover card. I want to make it same way. How can I do this?

推荐答案

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

I have came after another solution to this...here is the code

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

这篇关于在悬停弹出式窗口时，如何保持启动弹出式窗口的生命?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！