我正在使用 Bootstrap 的 Popover 构建一个网站,但我不知道如何使弹出框出现在悬停而不是点击时。
我想做的就是当有人将鼠标悬停在链接上而不是单击它时出现一个弹出框,并且当他们离开时弹出框消失。文档说可以使用 data 属性或 jquery。我宁愿用 jquery 来做,因为我有多个弹出窗口。
我想为可访问性添加它,我认为您应该添加焦点触发器:
即$("#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();
http://getbootstrap.com/javascript/#tooltips
在尝试了其中一些答案并发现它们不能很好地使用多个链接(例如,接受的答案需要为您拥有的每个链接提供一行 jquery)之后,我遇到了一种需要最少代码才能工作的方式,并且它似乎也可以完美运行,至少在 Chrome 上是这样。
您添加此行以激活它:
$('[data-toggle="popover"]').popover();
这些设置到您的锚链接:
data-toggle="popover" data-trigger="hover"
See it in action here,我使用与接受的答案相同的导入,因此它应该适用于旧项目。
<script> $(function () { $("#popover").popover(); }); </script>
$("#popover").popover({ trigger: "hover" });
。