小编stk*_*067的帖子

使用悬停触发器显示弹出窗口工作正常.

使用单击触发器显示弹出窗口工作正常.

现在,如何在触发图像悬停时显示弹出窗口,但如果用户单击图像,取消悬停并启动单击切换？换句话说,悬停显示弹出窗口并单击弹出窗口的"引脚".

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事件以尝试在触发click事件后重新启用mouseenter和mouseleave事件,但是它确实使'hover'再次工作,它杀死点击...

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) …