题 在悬停时出现Bootstrap Popover出现/消失而不是单击


我正在用Bootstrap构建一个网站 酥料饼 我无法弄清楚如何使鼠标悬停而不是点击。

我想要做的就是当有人在链接上盘旋而不是点击它时弹出窗口,当弹出窗口移开时弹出消失。文档说可以使用data属性或jquery。因为我有多个弹出窗口,所以我宁愿用jquery做这件事。


151
2017-09-09 23:01


起源


提示:悬停在触摸设备上很糟糕。如果您想确保触摸屏的可用性,请不要将功能绑定到悬停。 - Jørgen R


答案:


设置 trigger 弹出窗口的选项 hover 代替 click, 哪一个是 默认 一。

这可以使用任何一种方法完成 data-* 标记中的属性:

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

或者使用初始化选项:

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

这是一个 DEMO


325
2017-09-09 23:03



谢谢回复。如何为此代码设置触发选项? <script> $(function () { $("#popover").popover(); }); </script> - Muhambi
@Jake:使用 $("#popover").popover({ trigger: "hover" });。 - João Silva
谢谢你的回答!完美的工作! - Muhambi
@Jake:非常欢迎你,很高兴能帮忙。 - João Silva
谢谢!出于某种原因,我需要实现数据触发器和JS初始化。 - Anthony


我想补充一点,为了获取可访问性,我认为你应该添加焦点触发器:

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


29
2018-02-22 16:26



显然地 "hover click" 也有效 - Ray


如果你想悬停弹出窗口本身,你必须使用手动触发器。

这就是我提出的:

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

9
2018-04-09 07:50





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

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

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

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

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


6
2018-02-04 06:28





在尝试了一些这些答案并发现它们不能很好地扩展多个链接之后(例如,接受的答案需要为每个链接提供一行jquery),我遇到了一种需要最少代码才能工作的方法,并且它似乎也很完美,至少在Chrome上。

您添加此行以激活它:

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

以及这些设置到您的锚链接:

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

在这里看到它,我使用与接受的答案相同的导入,因此它应该在旧项目上正常工作。


0
2017-11-08 13:50