196

我正在使用 Bootstrap 的Popover构建一个网站，但我不知道如何使弹出框出现在悬停而不是单击时。

我想做的就是当有人将鼠标悬停在链接上而不是单击它时出现一个弹出框，并且当他们离开时弹出框消失。文档说可以使用 data 属性或 jquery。我宁愿用 jquery 来做，因为我有多个弹出窗口。

4

5 回答 5

397

将trigger弹出框的选项设置为hover而不是click默认选项。

这可以使用data-*标记中的任一属性来完成：

<a id="popover" data-trigger="hover">Popover</a>

或使用初始化选项：

$("#popover").popover({ trigger: "hover" });

这是一个演示。

于 2012-09-09T23:03:46.283 回答
34

我想为可访问性添加它，我认为您应该添加焦点触发器：

IE$("#popover").popover({ trigger: "hover focus" });

于 2013-02-22T16:26:17.433 回答
18

如果您还想悬停弹出框本身，则必须使用手动触发器。

这就是我想出的：

function enableThumbPopover() {
    var counter;

    $('.thumbcontainer').popover({
        trigger: 'manual',
        animation: false,
        html: true,
        title: function () {
            return $(this).parent().find('.thumbPopover > .title').html();
        },
        content: function () {
            return $(this).parent().find('.thumbPopover > .body').html();
        },
        container: 'body',
        placement: 'auto'
    }).on("mouseenter",function () {
        var _this = this; // thumbcontainer

        console.log('thumbcontainer mouseenter')
        // clear the counter
        clearTimeout(counter);
        // Close all other Popovers
        $('.thumbcontainer').not(_this).popover('hide');

        // start new timeout to show popover
        counter = setTimeout(function(){
            if($(_this).is(':hover'))
            {
                $(_this).popover("show");
            }
            $(".popover").on("mouseleave", function () {
                $('.thumbcontainer').popover('hide');
            });
        }, 400);

    }).on("mouseleave", function () {
        var _this = this;

        setTimeout(function () {
            if (!$(".popover:hover").length) {
                if(!$(_this).is(':hover')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}
于 2014-04-09T07:50:05.240 回答
6

您描述的功能可以使用 Bootstrap 工具提示轻松实现。

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

然后为元素调用 tooltip() 函数。

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

于 2015-02-04T06:28:13.773 回答
1

在尝试了其中一些答案并发现它们不能很好地使用多个链接（例如，接受的答案需要为您拥有的每个链接提供一行 jquery）之后，我遇到了一种需要最少代码才能工作的方式，并且它似乎也可以完美运行，至少在 Chrome 上是这样。

您添加此行以激活它：

$('[data-toggle="popover"]').popover();

这些设置到您的锚链接：

data-toggle="popover" data-trigger="hover"

在此处查看实际操作，我使用与接受的答案相同的导入，因此它应该可以在较旧的项目上正常工作。

于 2017-11-08T13:50:24.057 回答