MakeBootstrap popover出现/消失在悬停而不是单击

问题描述 投票:0回答:6
我想做的是当有人徘徊在链接上而不是单击它时,会出现弹出窗口,并在弹出窗口移开时消失。该文档说可以使用数据属性或jQuery。我宁愿用jQuery做到这一点,因为我有多个弹出声。

设置popover的选项为

trigger
javascript jquery twitter-bootstrap
6个回答
409
投票
而不是

hover

,这是
默认一个。 可以使用标记中的任何一个
click
属性来完成此操作:
data-*
或具有初始化选项:

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

thehere是一个

demo

.

我想添加它以供可访问性,我认为您应该添加焦点触发器:
I.E。 

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

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

34
投票

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

您描述的是,使用Bootstrap Tooltip可以轻松实现该功能。

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


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

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

    

6
投票

您必须使用

data-bs-
*而不是
data-

*

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

尝试其中一些答案并发现它们与多个链接的扩展不佳(例如,接受的答案需要您所拥有的每个链接的jQuery行),我遇到了一种需要最小的代码才能工作的方式,至少在Chrome上,它似乎也很完美。

3
投票

<a id="popover" data-bs-trigger="hover">Popover</a> 这些设置到您的锚点链接:

$('[data-toggle="popover"]').popover(); 在此处看到它在此处进行,我使用的是与接受答案相同的导入,因此它应该在较旧的项目上正常工作。

hon bootstrap 5,您可以使用data-bs-trigger =“悬停焦点”,以便弹出曲线显示为悬停在其上。

  按钮

    

2
投票

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.