使Bootstrap Popover在悬停时显示/消失，而不是单击
使Bootstrap Popover在悬停时显示/消失，而不是单击
提问于 2012-09-10 07:01:53
我正在用Bootstrap的Popover建立一个网站，我不知道如何让弹出窗口显示在悬停状态而不是点击。
我想要做的就是当有人将鼠标悬停在链接上而不是点击它时，弹出窗口会出现，当他们离开时，弹出窗口会消失。文档说可以使用data属性或jquery。我更喜欢使用jquery，因为我有多个弹出窗口。
回答 4
Stack Overflow用户
发布于 2013-02-23 00:26:17
我想补充一下，为了便于访问，我认为你应该添加焦点触发器：
即$("#popover").popover({ trigger: "hover focus" });
Stack Overflow用户
发布于 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);
});
}Stack Overflow用户
发布于 2015-02-04 14:28:14
您所描述的功能可以使用Bootstrap工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>然后调用元素的tooltip()函数。
$('#example1').tooltip();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12343695
复制相关文章
相似问题