Bootstrap 3 弹出框：鼠标悬停和点击触发显示，即固定弹出框。

Question

Bootstrap 3 弹出框：鼠标悬停和点击触发显示，即固定弹出框。

javascriptjquerytwitter-bootstrappopover

18

使用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>

而且弹出窗口的初始化，更加枯燥无味：

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

根据我目前的观察，解决方案似乎是在popover（'show'），popover（'hide'）和popover（'toggle'）调用之间进行巧妙复杂的设置，但我的javascript / jQuery开发水平无法胜任该任务。

编辑：

使用@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)
});

- stk11067

4个回答

8

非常简单，只需将 hover 添加到 data-trigger 中，如下所示：

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

- bart

这样做可以添加两个处理程序，但单击不会将其固定。当您在单击以显示它后鼠标移出时，它会消失。 - scipilot

@scipilot 我在Bootstrap 4中进行了测试，点击操作会将其固定，即使你鼠标移开了。 - Alphacoder

很有趣，谢谢@Alphacoder，我正在将一个网站迁移到BS4，这可能会派上用场（虽然我现在不记得我当时需要这个东西是为了什么！）。 - scipilot

4

这里有一个混合的弹出框/工具提示，可以为您提供所需的两种选项功能（单击和悬停切换）：

HTML:

```html

混合弹出框/工具提示 fiddle

```

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

- mikesi2

但是点击无法固定它。当你在点击以显示后鼠标移开，它就会消失。 - scipilot

2

以下是我使用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/（目前还不能使用，但你可以大致了解）。

- BtLutz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hajpoj · Accepted Answer

编辑：

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

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