使引导弹出框在悬停而不是单击时出现/消失

Posted 2023-02-22

【中文标题】使引导弹出框在悬停而不是单击时出现/消失

【英文标题】：Make Bootstrap Popover Appear/Disappear on Hover instead of Click

【发布时间】：2012-09-02 20:20:52

【问题描述】：

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

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

【问题讨论】：

提示：悬停在触摸设备上很糟糕。如果您想确保触摸屏的可用性，请不要将功能绑定到悬停。

【参考方案1】：

将弹出框的trigger选项设置为hover，而不是click，即default之一。

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

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

或者使用初始化选项：

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

这是一个DEMO。

【讨论】：

感谢您的回复。如何为此代码设置触发选项？ <script> $(function () $("#popover").popover(); ); </script>

@Jake：使用$("#popover").popover( trigger: "hover" );。

谢谢！出于某种原因，我需要同时实现数据触发器和 JS 初始化。

谁能帮我理解哪个是更好的选择，JS 初始化或数据属性？即使我使用数据属性，我仍然必须调用 $("#popover").popover();来自我的 javascript。

@Bailey 这将取决于您的编码规则是什么以及您是否使用任何特定的编码标准，然后是个人喜好。看看这两个，我更喜欢在 popover() 函数中定位触发器选项。对我来说似乎更具可读性。

【参考方案2】：

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

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

【讨论】：

没有点击这个请求-看看这个帖子的标题

【参考方案3】：

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

这就是我想出的：

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

【讨论】：

你能分享你使用的HTML吗？也许是太久以前了。我发现您的答案是最好的答案之一，特别是因为当您将鼠标悬停在弹出框本身时弹出框保持打开状态。但我无法确定将“thumbPopover”和“thumbcontainer”类放在哪里。

【参考方案4】：

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

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

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

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

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

【参考方案5】：

在尝试了其中一些答案并发现它们不能很好地与多个链接一起扩展（例如，接受的答案需要为您拥有的每个链接添加一行 jquery），我遇到了一种需要最少代码来获取的方法工作，而且它似乎也能完美地工作，至少在 Chrome 上是这样。

您添加此行以激活它：

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

这些设置到您的锚链接：

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

See it in action here，我使用与接受的答案相同的导入，因此它应该可以在较旧的项目上正常工作。