trigger
hover
,这是默认一个。 可以使用标记中的任何一个
click
属性来完成此操作:
data-*
或具有初始化选项:
<a id="popover" data-trigger="hover">Popover</a>
thehere是一个
demo.
我想添加它以供可访问性,我认为您应该添加焦点触发器:
I.E。 如果您想悬停弹出式本身,则必须使用手动触发器。
$("#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);
});
}
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
http://getbootstrap.com/javascript/#tooltips
<a id="popover" data-bs-trigger="hover">Popover</a>
这些设置到您的锚点链接:
$('[data-toggle="popover"]').popover();
在此处看到它在此处进行,我使用的是与接受答案相同的导入,因此它应该在较旧的项目上正常工作。