使引导程序弹出窗口显示/消失悬停而不是单击
我正在用Bootstrap的Popover构建一个网站，我无法弄清楚如何让弹出窗口显示在鼠标上而不是点击。
我想要做的就是当有人悬停在某个链接上而不是点击它时弹出窗口，当弹出窗口消失时弹出窗口消失。 该文档说可能使用数据属性或jQuery。 我宁愿用jQuery来做，因为我有多个popovers。
将弹出式窗口的trigger选项设置为hover而不是click ，这是默认的选项。
这可以使用标记中的data-*属性来完成：
<a id="popover" data-trigger="hover">Popover</a>
或者使用初始化选项：
$("#popover").popover({ trigger: "hover" });
这是一个DEMO 。
我想补充说，对于可访问性，我认为你应该添加焦点触发器：
即$("#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);
});
}
上一篇: Make Bootstrap Popover Appear/Disappear on Hover instead of Click