Bootstrap的popover如何在鼠标移入弹窗时不消失?

发布于 2022-08-24 13:36:00 字数 190 浏览 18 评论 0

我想实现下面的效果:
1. trigger = hover , 当鼠标 hover 在元素上时触发 popover
2. 当鼠标不再 hover 在元素上且不在 popover 弹出的新层上时弹层关闭

现在的情况:
1. 可以实现 hover 时出现弹窗
2. 鼠标移出元素则关闭,即使鼠标移入到弹窗层中。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

差↓一点笑了 2022-08-31 13:36:00

我在 github 上面新建了一个 issue , 开发者很快就回复了(github链接)。
据他们的解释,这种实现方案被他们舍弃了。因为在移动设备的触屏上面没有 hover 这个事件,所以官方推荐使用 click 事件触发 popover。在桌面版本的浏览器中,可以通过设置 delay 参数让 popover 自动关闭。

触ぅ动初心 2022-08-31 13:36:00

popover 可以这么用:

$().popover(options)

options,你传 "show" ,它就显示出来,传 "hide" 就会隐藏,这样的话,LZ 可以手动控制在何时显示,何时隐藏啊。

格子衫的從容 2022-08-31 13:36:00

因为 popover 的触发元素和 popover 最终的弹出层之间有间隔,无法保证从触发元素移出后能移动到弹出层上,所以个人感觉这个效果无法实现。

婴鹅 2022-08-31 13:36:00

你可以把 hover元素和pop元素放在同一个div下面,然后对div 进行 hover操作

吻风 2022-08-31 13:36:00

可以使用参数trigger = focus,并使用自定义hover事件来触发,例如:

$('#button').popover({
        template: '<div></div>',
        placement: 'bottom',
        trigger: 'focus',
        html: 'true',
        content: '<ul class="multi">'+
                    '<li><a href="/1">1</a></li>'+
                    '<li><a href="/2">2</a></li>'+
                '</ul>'
});

    $('#button').hover(function(){
        $(this).focus();
    },function(){
        // do nothings
    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文