使 Bootstrap 弹窗在鼠标悬停时出现/消失，而不是单击时出现/消失

我正在用 Bootstrap 的弹出窗口构建一个网站，我不知道如何使窗口在悬停时而不是单击时出现。

所有我想做的是有一个弹出窗口出现时，有人悬停在一个链接，而不是点击它和弹出窗口消失时，他们移动。文档中说可以使用data属性或jquery。我宁愿用jquery，因为我有多个弹窗。

315480 次浏览
小开
最佳答案

将弹出窗口的trigger选项设置为hover，而不是click，后者是默认的选项。

这可以使用标记中的data-*属性来完成:

<a id="popover" data-trigger="hover">Popover</a>

或者带有初始化选项:

$("#popover").popover({ trigger: "hover" });

这是一个演示< a href = " http://jsfiddle.net/9P64a/ " > < / >。

小开

我想添加的易用性，我认为你应该添加焦点触发器:

例如$("#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"

在这里看到它的行动，我使用相同的导入作为接受的答案，所以它应该工作在旧的项目。

小开

从Bootstrap 5.1版开始

你必须使用data-bs -*而不是数据-*

<a id="popover" data-bs-trigger="hover">Popover</a>

提交答案