使用悬停 触发器可以正常显示弹出窗口。

通过 click 触发器显示弹出窗口效果很好。

现在，当鼠标悬停在触发图像上时，如何让弹出框出现，但如果用户单击图像，取消悬停并启动点击切换？换句话说，悬停显示弹出窗口并单击“固定”弹出窗口。

HTML 非常标准:

<li>User<span class="glyphicon glyphicon-user" rel="popover" data-trigger="click" data-container="body" data-placement="auto left" data-content="Body Text" data-original-title="Title Text"></span></li>

还有 popover 初始化，更无聊:

$(function () { 
    $("[rel=popover]").popover();   
});

据我目前所见，解决方案似乎是一组很好的复杂的 popover('show')、popover('hide')和 popover('toggle') 调用，但我的 javascript/jQuery-foo 不能胜任这项任务。

编辑:

我以@hajpoj提供的代码为基础，添加了监听hidden.bs.popover事件的函数，尝试在触发点击后重新启用mouseenter和mouseleave事件事件，但尽管它确实使“悬停”再次起作用，但它会杀死点击...

var $btn2 = $('#btn2');

    var enterShow = function() {
        $btn2.popover('show');
    };

    var exitHide = function() {
        $btn2.popover('hide');
    }

    $btn2.popover({trigger: 'manual'})
            .on('mouseenter', enterShow)
            .on('mouseleave', exitHide)
            .one('click', function() {
                   $btn2.off('mouseenter', enterShow)
                        .off('mouseleave', exitHide)
                        .on('click', function() {
                            $btn2.popover('toggle');
                        });
            });

$('#btn2').on('hidden.bs.popover', function () {
  $btn2.on('mouseenter', enterShow)
       .on('mouseleave', exitHide)
});

最佳答案

编辑:

这是根据您的评论更新的解决方案。它不会停留在“点击”状态，而是返回到悬停状态。

jsfiddle:http://jsfiddle.net/hajpoj/JJQS9/15/

html:

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

js:

var $btn2 = $('#btn2');
$btn2.data('state', 'hover');

var enterShow = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('show');
    }
};
var exitHide = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.popover('hide');
    }
};

var clickToggle = function () {
    if ($btn2.data('state') === 'hover') {
        $btn2.data('state', 'pinned');
    } else {
        $btn2.data('state', 'hover')
        $btn.popover('hover');
    }
};

$btn2.popover({trigger: 'manual'})
    .on('mouseenter', enterShow)
    .on('mouseleave', exitHide)
    .on('click', clickToggle);

旧:

我相信这就是您要找的:

http://jsfiddle.net/JJQS9/1/

html:

<a href="#" id="btn2" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

js:

var $btn2 = $('#btn2');

var enterShow = function() {
    $btn2.popover('show');
};

var exitHide = function() {
    $btn2.popover('hide');
}

$btn2.popover({trigger: 'manual'})
        .on('mouseenter', enterShow)
        .on('mouseleave', exitHide)
        .one('click', function() {
            $btn2.off('mouseenter', enterShow)
                    .off('mouseleave', exitHide)
                    .on('click', function() {
                        $btn2.popover('toggle');
                    });
        });

基本上，您在 mouseenter 和 mouseleave 事件上手动打开/关闭弹出窗口，但是一旦有人第一次点击弹出窗口，您就删除了这些事件处理程序，并在切换弹出窗口的 click 事件上添加一个新的处理程序。

编辑: 一个替代的js代码。更简单的代码，但是当你使用它时有一个小的视觉信号: http://jsfiddle.net/hajpoj/r3Ckt/1/

var $btn2 = $('#btn2');

$btn2.popover({trigger: 'hover'})
    .one('click', function() {
        $btn2.popover('destroy')
            .popover({ trigger: 'click'})
            .popover('show');
    });

关于javascript - Bootstrap 3 Popover : display on hover AND on click, 又名。固定弹出框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18735180/