Bootstrap 3 Popover：在悬停和点击时显示，又名。固定弹出框答案

【问题标题】：Bootstrap 3 Popover: display on hover AND on click, aka. Pin a PopoverBootstrap 3 Popover：在悬停和点击时显示，又名。固定弹出框
【发布时间】：2013-09-11 07:30:50
【问题描述】：

使用 hover 触发器显示弹出框效果很好。

使用 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事件的函数，试图在触发click事件后重新启用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)
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

编辑：

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

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 事件上手动弹出打开/关闭弹出框，但是一旦有人第一次点击弹出框，您将删除这些事件处理程序，并在 @987654330 上添加一个新处理程序@ 切换弹出框的事件。

编辑： 另一种 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');
    });

【讨论】：

上面的代码效果很好，除了一个细节。一旦您“单击”并固定弹出框，然后“单击”以删除弹出框，mouseenter/mouseleave 事件将不再起作用。请参阅对原始问题的编辑以查看我重新启用此功能的尝试。它几乎可以工作......
你的意思是 .on('click' 而不是 .one('click' ?
@hajpoj，我对编辑后的答案有疑问。 $btn.popover('hover'); 行不正确。它应该是$btn2.popover('show');，因为它在弹出函数中为hover 提供了脚本错误。

【解决方案2】：

很简单，添加hover到data-trigger如下：

<span rel="popover" data-trigger="hover click" data-container="body" data-placement="auto" data-content="Body Text"></span>

【讨论】：

这确实添加了两个处理程序，但点击并没有固定它。当你在点击显示后鼠标移开，它就会消失。
@scipilot 我在 bootstrap 4 中对其进行了测试，即使您将鼠标移出，单击也会将其固定
有趣的感谢@Alphacoder，我只是将一个站点迁移到 BS4，可能会派上用场（不过我不记得我现在需要什么！）。

【解决方案3】：

这是一个混合弹出框/工具提示，可以为您提供您正在寻找的两个选项的功能，点击和悬停时切换）：

Hybrid popover/tooltip fiddle

HTML：

<button id="tip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title='this text!'>What's hidden?</button>

JS：

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

$tip1.tooltip({trigger: 'hover'})
  .on('click', function() {
    $tip1.tooltip('toggle');
});

【讨论】：

但是点击并没有固定它。当您在点击显示后鼠标移出时，它会消失。

【解决方案4】：

这是我使用 Bootstrap 和 JQuery 完成悬停/固定功能的方式：

$(function () {
    var clicked = false;

    var onLeave = function() {
        if (!clicked) { $(this).popover('hide'); }
    };

    var onEnter = function () {
        if (!clicked) { $(this).popover('show'); }
    };

    var clickToggle = function() {
        if (clicked) { $(this).popover('hide'); }
        clicked = !clicked;
    }
    $('.popover-div-class').popover({ trigger: "manual"})
        .on('mouseenter', onEnter)
        .on('mouseleave', onLeave)
        .on('click', clickToggle);
});

我不确定它是否适用于所有场景，但它适用于我的场景。向@hajpoj 和@Trevor 大喊大叫以获得灵感。

JSFiddle：https://jsfiddle.net/5m2ob3yf/（目前还不能用，但您可以了解要点）。

【讨论】：