我正在建立一个网站与Bootstrap的弹出窗口,我不知道如何使弹出窗口出现在悬停,而不是点击。我所要做的就是当有人悬停在链接上而不是点击它时弹出窗口出现,当他们离开时弹出窗口消失。文档中说可以使用data属性或jquery。我更愿意用jquery来做,因为我有多个弹出窗口。
d6kp6zgx1#
您所描述的功能可以使用引导工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
然后为该元素调用tooltip()函数。
$('#example1').tooltip();
http://getbootstrap.com/javascript/#tooltips
hts6caw32#
在尝试了其中的几个答案后,发现它们不能很好地扩展多个链接(例如,接受的答案需要一行jquery来表示每个链接),我遇到了一种方法,它需要最少的代码来工作,而且看起来也很完美,至少在Chrome上是这样。您可以添加以下行来激活它:
$('[data-toggle="popover"]').popover();
并将这些设置添加到锚链接:
data-toggle="popover" data-trigger="hover"
See it in action here,我使用的导入与接受的答案相同,因此它在旧项目上应该工作得很好。
nqwrtyyt3#
来自引导程序版本5.1
必须使用 *data-bs-*而不是 data-
<a id="popover" data-bs-trigger="hover">Popover</a>
p8h8hvxi4#
将弹出窗口的trigger选项设置为**hover**,而不是默认值click。这可以使用标记中的data-*属性来完成:
trigger
hover
click
data-*
<a id="popover" data-trigger="hover">Popover</a>
或者使用初始化选项:
$("#popover").popover({ trigger: "hover" });
这里有一个**DEMO**
uttx8gqw5#
我想补充的是,对于可访问性,我认为您应该添加焦点触发器:即$("#popover").popover({ trigger: "hover focus" });
$("#popover").popover({ trigger: "hover focus" });
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); }); }
6条答案
按热度按时间d6kp6zgx1#
您所描述的功能可以使用引导工具提示轻松实现。
然后为该元素调用tooltip()函数。
http://getbootstrap.com/javascript/#tooltips
hts6caw32#
在尝试了其中的几个答案后,发现它们不能很好地扩展多个链接(例如,接受的答案需要一行jquery来表示每个链接),我遇到了一种方法,它需要最少的代码来工作,而且看起来也很完美,至少在Chrome上是这样。
您可以添加以下行来激活它:
并将这些设置添加到锚链接:
See it in action here,我使用的导入与接受的答案相同,因此它在旧项目上应该工作得很好。
nqwrtyyt3#
来自引导程序版本5.1
必须使用 *data-bs-*而不是 data-
p8h8hvxi4#
将弹出窗口的
trigger
选项设置为**hover
**,而不是默认值click
。这可以使用标记中的
data-*
属性来完成:或者使用初始化选项:
这里有一个**DEMO**
uttx8gqw5#
我想补充的是,对于可访问性,我认为您应该添加焦点触发器:
即
$("#popover").popover({ trigger: "hover focus" });
cwtwac6a6#
如果你想悬停弹出本身以及你必须使用手动触发。
这是我想出来的