Javascript 使 Bootstrap Popover 在悬停而不是单击时出现/消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12343695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make Bootstrap Popover Appear/Disappear on Hover instead of Click
提问by Muhambi
I'm building a website with Bootstrap's Popoverand I can't figure out how to make the popover appear on hover instead of click.
我正在使用 Bootstrap 的Popover构建一个网站，但我不知道如何使 popover 出现在悬停而不是单击时。
All I want to do is have a popover appear when someone hovers over a link instead of clicking on it and for the popover to disappear when they move away. The documentation says it's possible using either the data attribute or jquery. I'd much rather do it with jquery since I have multiple popovers.
我想要做的就是当有人将鼠标悬停在链接上而不是点击它时出现一个弹出框，并且当他们离开时弹出框消失。文档说可以使用 data 属性或 jquery。我更愿意用 jquery 来做，因为我有多个弹出框。
回答by Jo?o Silva
Set the triggeroption of the popover to hoverinstead of click, which is the defaultone.
将trigger弹出框的选项设置为hover而不是click，这是默认选项。
This can be done using either data-*attributes in the markup:
这可以使用data-*标记中的任一属性来完成：
<a id="popover" data-trigger="hover">Popover</a>
Or with an initialization option:
或者使用初始化选项：
$("#popover").popover({ trigger: "hover" });
Here's a DEMO.
这是一个演示。
回答by Calexo
I'd like to add that for accessibility, I think you should add focus trigger :
我想添加可访问性，我认为您应该添加焦点触发器：
i.e. $("#popover").popover({ trigger: "hover focus" });
IE $("#popover").popover({ trigger: "hover focus" });
回答by Johannes Ferner
If you want to hover the popover itself as well you have to use a manual trigger.
如果您还想悬停弹出框本身，则必须使用手动触发器。
This is what i came up with:
这就是我想出的：
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);
});
}
回答by VforVitamin
The functionality, you described, can be easily achieved using the Bootstrap tooltip.
您描述的功能可以使用 Bootstrap 工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
Then call tooltip() function for the element.
然后为元素调用 tooltip() 函数。
$('#example1').tooltip();
回答by Peter
After trying a few of these answers and finding they don't scale well with multiple links (for example the accepted answer requires a line of jquery for every link you have), I came across a way that requires minimal code to get working, and it also appears to work perfectly, at least on Chrome.
在尝试了其中的一些答案并发现它们不能很好地扩展到多个链接（例如，接受的答案要求您拥有的每个链接都使用一行 jquery）后，我遇到了一种需要最少代码才能工作的方法，并且它似乎也能完美运行，至少在 Chrome 上是这样。
You add this line to activate it:
您添加此行以激活它：
$('[data-toggle="popover"]').popover();
And these settings to your anchor links:
以及这些锚链接的设置：
data-toggle="popover" data-trigger="hover"
See it in action here, I'm using the same imports as the accepted answer so it should work fine on older projects.
在这里查看它的实际效果，我使用与接受的答案相同的导入，因此它应该可以在较旧的项目上正常工作。
