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

Bootstrap 3 Popover: display on hover AND on click, aka. Pin a Popover

提问by stk11067

Making a popover appear with the hovertrigger works fine.

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

Making a popover appear with the clicktrigger works fine.

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

Now, how do I go about making the popover appear when the triggering image is hovered over, but then if the user clicks on the image, cancel the hover and initiate a click toggle? In other words, hovering shows the popover and clicking 'pins' the popover.

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

The HTML is pretty standard:

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>

And the popover initialization, even more boring:

还有popover的初始化，就更无聊了：

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

From what I have seen so far, it seems likely that the solution is a nice complex set of popover('show'), popover('hide'), and popover('toggle')calls, but my javascript / jQuery-foo is not up to the task.

从我迄今所看到的，它很可能是该解决方案是一个很好的复杂的popover('show')，popover('hide')和popover('toggle')电话，但我的JavaScript / jQuery的foo是达不到的任务。

EDIT:

编辑：

Using the code provided by @hajpoj as a base, I added a function to listen to the hidden.bs.popoverevent to try to re-enable the mouseenter and mouseleave events after triggering the click event, but although it does make the 'hover' work again, it kills the click...

使用@hajpoj 提供的代码作为基础，我添加了一个函数来监听hidden.bs.popover事件，以尝试在触发点击事件后重新启用 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)
       .on('mouseleave', exitHide)
});

回答by hajpoj

Edit:

编辑：

Heres an updated solutions based off your comment. It doesn't stay in a 'click' state but returns to the hover state.

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

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

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

html:

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:

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

---

---

Old:

老的：

I believe this is what you are looking for:

我相信这就是你要找的：

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

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

html:

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:

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

Basically you manually pop open/close the popover on the mouseenterand mouseleaveevents, but once someone clicks on the popover for the first time, you remove those event handlers, and add a new handler on the clickevent that toggles the popover.

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

Edit:an alternative js code. simpler code, but there is a small visual blip when you use it: http://jsfiddle.net/hajpoj/r3Ckt/1/

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

回答by bart

Very simple, add hoverto data-triggeras follows:

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

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

回答by mikesi2

Here's a hybrid popover/tooltip that could give you the functionality that you are looking for both options, toggles on click and hover):

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

Hybrid popover/tooltip fiddle

混合弹出框/工具提示小提琴

HTML:

HTML：

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

JS:

JS：

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

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

回答by BtLutz

Here's the way I accomplished the hover/pin functionality using Bootstrap and JQuery:

这是我使用 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);
});

I'm not sure it'll work in all scenarios, but it worked in mine. Big shoutout to @hajpoj and @Trevor for the inspiration.

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

JSFiddle: https://jsfiddle.net/5m2ob3yf/(Doesn't work yet, but you can get the gist).

JSFiddle：https://jsfiddle.net/5m2ob3yf/ （还不能用，但你可以得到要点）。