我正在用Bootstrap的Popover建立一个网站,我不知道如何让弹出窗口显示在悬停状态而不是点击。
我想要做的就是当有人将鼠标悬停在链接上而不是点击它时,弹出窗口会出现,当他们离开时,弹出窗口会消失。文档说可以使用data属性或jquery。我更喜欢使用jquery,因为我有多个弹出窗口。
发布于 2013-02-23 00:26:17
我想补充一下,为了便于访问,我认为你应该添加焦点触发器:
即$("#popover").popover({ trigger: "hover focus" });
发布于 2014-04-09 15:50:05
如果你想将鼠标悬停在弹出窗口上,你必须使用手动触发器。
这是我想出来的:
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);
});
}
发布于 2015-02-04 14:28:14
您所描述的功能可以使用Bootstrap工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
然后调用元素的tooltip()函数。
$('#example1').tooltip();
https://stackoverflow.com/questions/12343695
复制相似问题