[英]Make Bootstrap Popover Appear/Disappear on Hover instead of Click
我正在使用Bootstrap的Popover构建一个网站,我无法弄清楚如何使鼠标悬停而不是点击。
我想要做的就是当有人在链接上盘旋而不是点击它时弹出窗口,当弹出窗口移开时弹出消失。 文档说明可以使用data属性或jquery。 因为我有多个弹出窗口,所以我宁愿用jquery做这件事。
我想补充一点,为了获取可访问性,我认为你应该添加焦点触发器:
ie $("#popover").popover({ trigger: "hover focus" });
如果你想悬停弹出窗口本身,你必须使用手动触发器。
这就是我提出的:
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);
});
}
您描述的功能可以使用Bootstrap工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
然后为元素调用tooltip()函数。
$('#example1').tooltip();
在尝试了一些这些答案并发现它们不能很好地扩展多个链接之后(例如,接受的答案需要为每个链接提供一行jquery),我遇到了一种需要最少代码才能工作的方法,并且它似乎也很完美,至少在Chrome上。
您添加此行以激活它:
$('[data-toggle="popover"]').popover();
这些设置到您的锚链接:
data-toggle="popover" data-trigger="hover"
在这里看到它的实际应用 ,我使用与接受的答案相同的导入,因此它应该在旧项目上正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.