Bootstrap 3 Popover：在悬停和点击时显示，也就是说。固定一个弹出窗口 [英] Bootstrap 3 Popover: display on hover AND on click, aka. Pin a Popover

问题描述

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

Making a popover appear with the hover trigger works fine.

使用点击显示弹出窗口触发工作正常。

Making a popover appear with the click trigger 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.

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:

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

从目前为止我看到的情况来看，这个解决方案很可能是一个很好的复杂的 popover（'show'）， popover（'hide'）和 popover（'toggle '）调用，但我的javascript / jQuery-foo不能完成任务。

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.

编辑：

使用@hajpoj提供的代码作为基础，我添加了一个函数来监听 hidden.bs.popover 触发click事件后尝试重新启用mouseenter和mouseleave事件的事件，但是虽然它确实使'hover'再次起作用，但它会终止点击...

Using the code provided by @hajpoj as a base, I added a function to listen to the hidden.bs.popover event 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...

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

推荐答案

编辑

根据您的评论提供更新的解决方案。它不会处于点击状态，而是返回到悬停状态。

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：

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

---

旧：

我相信这就是你要找的东西：

I believe this is what you are looking for:

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上的popover 和 mouseleave 事件，但是一旦有人第一次点击弹出窗口，你就删除那些事件处理程序，并在<$ c $上添加一个新的处理程序c>单击切换弹出窗口的事件。

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

编辑：
替代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');
    });

这篇关于Bootstrap 3 Popover：在悬停和点击时显示，也就是说。固定一个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！