Bootstrap 使引导程序弹出窗口在悬停而不是单击时显示/消失

vx6bjr1n  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(6)|浏览(171)

我正在建立一个网站与Bootstrap的弹出窗口,我不知道如何使弹出窗口出现在悬停,而不是点击。
我所要做的就是当有人悬停在链接上而不是点击它时弹出窗口出现,当他们离开时弹出窗口消失。文档中说可以使用data属性或jquery。我更愿意用jquery来做,因为我有多个弹出窗口。

d6kp6zgx

d6kp6zgx1#

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

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

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

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

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

hts6caw3

hts6caw32#

在尝试了其中的几个答案后,发现它们不能很好地扩展多个链接(例如,接受的答案需要一行jquery来表示每个链接),我遇到了一种方法,它需要最少的代码来工作,而且看起来也很完美,至少在Chrome上是这样。
您可以添加以下行来激活它:

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

并将这些设置添加到锚链接:

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

See it in action here,我使用的导入与接受的答案相同,因此它在旧项目上应该工作得很好。

nqwrtyyt

nqwrtyyt3#

来自引导程序版本5.1

必须使用 *data-bs-*而不是 data-

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

p8h8hvxi4#

将弹出窗口的trigger选项设置为**hover**,而不是默认值click
这可以使用标记中的data-*属性来完成:

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

或者使用初始化选项:

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

这里有一个**DEMO**

uttx8gqw

uttx8gqw5#

我想补充的是,对于可访问性,我认为您应该添加焦点触发器:
$("#popover").popover({ trigger: "hover focus" });

cwtwac6a

cwtwac6a6#

如果你想悬停弹出本身以及你必须使用手动触发。
这是我想出来的

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

相关问题