使Bootstrappopup窗口显示/消失hover，而不是点击
我正在用Bootstrap的Popover构build一个网站，我无法弄清楚如何让popup窗口显示在鼠标上，而不是点击。
我想要做的就是当有人hover在某个链接上而不是点击它时popup窗口，当popup窗口消失时popup窗口会消失。 文档说可能使用数据属性或jQuery。 我宁愿用jQuery来做，因为我有多个popovers。
将popup窗口的trigger选项设置为hover而不是click ，这是默认的选项 。
这可以使用标记中的data-*属性来完成：
<a id="popover" data-trigger="hover">Popover</a>
或者用一个初始化选项：
$("#popover").popover({ trigger: "hover" });
这是一个DEMO 。
我想补充说，对于可访问性，我认为你应该添加焦点触发器：
例如$("#popover").popover({ trigger: "hover focus" });
如果您想要将popup窗口本身hover，则必须使用手动触发器。
这是我想出来的：
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); }); }
您所描述的function可以使用Bootstrap工具提示轻松实现。
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
然后调用该元素的tooltip（）函数。
$('#example1').tooltip();
在尝试了几个这样的答案之后，发现它们不能很好地通过多个链接进行扩展（例如，接受的答案需要为每个链接提供一行jquery），我碰到了一个需要最less代码才能工作的方法，至less在Chrome上，它看起来也很完美。
你可以添加这一行来激活它：
$('[data-toggle="popover"]').popover();
而这些设置到您的锚链接：
data-toggle="popover" data-trigger="hover"
在这里看到它的行动 ，我使用相同的import作为接受的答案，所以它应该适用于较旧的项目。
