我怎样才能让Twitter Bootstrap Popover打开，直到我的鼠标移动到它呢？
我有一个链接，使用Twitter Bootstrap Popover版本1.3.0来显示一些信息。 这些信息包括一个链接，但是每次我将鼠标从链接移动到popup窗口时，popup窗口就会消失。
我怎样才能让popover打开足够长的时间，使鼠标移动到它？ 那么当鼠标移出链接和popover时，隐藏它？
还是有一些其他的插件可以做到这一点？
用bootstrap（testing版本2），我想出了下面的代码：
$("a[rel=popover]") .popover({ offset: 10, trigger: 'manual', animate: false, html: true, placement: 'left', template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }).click(function(e) { e.preventDefault() ; }).mouseenter(function(e) { $(this).popover('show'); }); 要点是用mouseleave（）启动器覆盖模板。 我希望这有帮助。
只要添加到Marchello的例子中，如果你想让popup消失，如果用户移动他们的鼠标离开popup窗口和源链接，试试这个。
var timeoutObj; $('.nav_item a').popover({ offset: 10, trigger: 'manual', html: true, placement: 'right', template: '<div class="popover" onmouseover="clearTimeout(timeoutObj);$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }).mouseenter(function(e) { $(this).popover('show'); }).mouseleave(function(e) { var ref = $(this); timeoutObj = setTimeout(function(){ ref.popover('hide'); }, 50); });
Bootstrap 3及以上
很简单，只需使用container选项，并将其作为调用popup窗口的元素。 这样，popup窗口就是调用它的元素的一个子元素。 因此，你在技术上仍然hover在父母身上，因为孩子的弹窗属于它。
例如：
HTML：
<div class="pop" data-content="Testing 12345">This has a popover</div> <div class="pop" data-content="Testing 12345">This has a popover</div> <div class="pop" data-content="Testing 12345">This has a popover</div>
jQuery的：
运行一个$.each()循环遍历每一个我想要一个popover绑定到它的父元素的元素。 在这种情况下，每个元素都有pop类。
$('.pop').each(function () { var $elem = $(this); $elem.popover({ placement: 'top', trigger: 'hover', html: true, container: $elem }); });
CSS：
这部分是可选的，但推荐。 它将popup窗口向下移动7个像素，以便于访问。
.pop .popover { margin-top:7px; }
工作演示
这是一个有点hacky，但build立marchello的例子，我做到了这一点（无需模板）：
$(".trigger-link").popover({ trigger: "manual", }).on("click", function(e) { e.preventDefault(); }).on("mouseenter", function() { var _this = this; $(this).popover("show"); $(this).siblings(".popover").on("mouseleave", function() { $(_this).popover('hide'); }); }).on("mouseleave", function() { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide") } }, 100); });
setTimeout有助于确保有时间从触发链接移动到popup窗口。
引导github回购这个问题处理这个问题。 胖子指出实验“在上/下/左/右”的安置。 它工作，很好，但你必须确保popover触发器没有静态定位与CSS。 否则popup窗口不会出现在你想要的地方。
HTML：
<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
CSS：
/*CSS */ .myClass{ position: relative;}
JS：
$(function(){ $('.myClass').popover({placement: 'in top'}); });
这是我的看法： http : //jsfiddle.net/WojtekKruszewski/Zf3m7/22/
有时将鼠标从popup式触发器移动到对angular线的实际popup式内容时，可以将鼠标hover在下面的元素上。 我想处理这种情况 – 只要你在超时之前触发popover内容，你就保存了（popover不会消失）。 它需要delay选项。
这个hack基本上覆盖了Popover leave函数，但是调用原始的（启动计时器来隐藏popup）。 然后它将一个一次性的监听器附加到mouseenter popover内容元素上。
如果鼠标进入popup，定时器被清除。 然后，它会在mouseleave上监听mouseleave ，如果它被触发，它会调用原来的leave函数，以便它可以启动隐藏计时器。
var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj){ var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) var container, timeout; originalLeave.call(this, obj); if(obj.currentTarget) { container = $(obj.currentTarget).siblings('.popover') timeout = self.timeout; container.one('mouseenter', function(){ //We entered the actual popover – call off the dogs clearTimeout(timeout); //Let's monitor popover content instead container.one('mouseleave', function(){ $.fn.popover.Constructor.prototype.leave.call(self, self); }); }) } };
解决scheme为我们的Bootstrap 3工作。
var timeoutObj; $('.list-group a').popover({ offset: 10, trigger: 'manual', html: true, placement: 'right', template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide();});"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }).mouseenter(function(e) { $(this).popover('show'); }).mouseleave(function(e) { var _this = this; setTimeout(function() { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 100); });
最后我解决了这个问题。 Popover消失是因为Popover不是子节点的链接，而是子节点的体。
所以修复它很简单，改变bootstrap-twipsy.js内容：
将.prependTo(document.body)更改为.prependTo(this.$element)
并修改由于变更而导致的职位问题。
而且有些使用链接老虎popup也会导致链接popup，所以添加一个包含链接的span，这样问题就解决了。
这是Wojtek Kruszewski解决scheme的一个版本。 当鼠标返回触发时，此版本句柄popup窗口闪烁。 http://jsfiddle.net/danielgatis/QtcpD/
(function($) { var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type)); originalLeave.call(this, obj); if (obj.currentTarget) { var current = $(obj.currentTarget); var container = current.siblings(".popover"); container.on("mouseenter", function() { clearTimeout(self.timeout); }); container.on("mouseleave", function() { originalLeave.call(self, self); }); } }; var originalEnter = $.fn.popover.Constructor.prototype.enter; $.fn.popover.Constructor.prototype.enter = function(obj) { var self = (obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data("bs." + this.type)); clearTimeout(self.timeout); if (!$(obj.currentTarget).siblings(".popover:visible").length) { originalEnter.call(this, obj); } }; })(jQuery);
我尝试了@Wotjek Kruszewski和@danielgatis的解决scheme，但都没有为我工作。 警告：我正在使用Bootstrap v2.1.0，而不是v3。 这个解决scheme是在coffeescript（为什么人们还在使用普通的javascript？=））。
(($) -> originalLeave = $.fn.popover.Constructor::leave $.fn.popover.Constructor::leave = (e) -> self = $(e.currentTarget)[@type](@_options).data(@type) originalLeave.call @, e if e.currentTarget container = $(".popover") container.one "mouseenter", -> clearTimeout self.timeout container.one "mouseleave", -> originalLeave.call self, e ) jQuery
这是我做的：
e = $("a[rel=popover]") e.popover({ content: d, html:true, trigger:'hover', delay: {hide: 500}, placement: 'bottom', container: e, })
这是一个非常简单和awesone解决这个问题，我发现通过查找引导工具提示代码。 在Bootstrap v3.0.3中这里是我注意到的代码行：
this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
这就是说，如果popover的container属性被定义，那么popover获得appendTo（）元素，而不是insertAfter（）原始元素，所有你需要做的只是传递元素作为容器属性。 由于appendTo（），popup窗口成为绑定hover事件的链接的一部分，从而在鼠标移动时保持popup窗口打开。
这在BootStrap 3上适用于我：
el.popover({ delay: {hide: 100} }).on("shown.bs.popover", function(){ el.data("bs.popover").tip().off("mouseleave").on("mouseleave", function(){ setTimeout(function(){ el.popover("hide"); }, 100); }); }).on("hide.bs.popover", function(ev){ if(el.data("bs.popover").tip().is(":hover")) ev.preventDefault(); });
在由@stevendaniels链接的会话结束时，链接到一个名为BootstrapX的Twitter Bootstrap扩展-由Lee Carmichael点击。 这会将popup窗口从一个过大的工具提示更改为一个交互式控件，可以通过单击窗体上的其他位置，closuresbutton或超时之后closures该控件。 它易于使用，并为我需要的项目工作得非常好。其使用的一些例子可以在这里find。
我不喜欢我find的任何答案，所以我结合了一些接近于下面的代码的答案。 它允许你最终只需input$(selector).pinnablepopover(options); 每一次你想做一个'pinnable'popover。
使事情变得简单的代码：
$.fn.popoverHoverShow = function () { if(this.data('state') !== 'pinned') { if(!this.data('bs.popover').$tip || (this.data('bs.popover').$tip && this.data('bs.popover').$tip.is(':hidden'))) { this.popover('show'); } } }; $.fn.popoverHoverHide = function () { if (this.data('state') !== 'pinned') { var ref = this; this.data('bs.popover').$tip.data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) .on('mouseenter', function(){ clearTimeout($(this).data('timeout')) }) .on('mouseleave', function(){ $(this).data('timeout', setTimeout(function(){ ref.popover('hide') }, 100)) }); this.on('mouseenter', function(){ clearTimeout($(this).data('timeout')) }); } }; $.fn.popoverClickToggle = function () { if (this.data('state') !== 'pinned') { this.data('state', 'pinned'); } else { this.data('state', 'hover') } }; $.fn.pinnablepopover = function (options) { options.trigger = manual; this.popover(options) .on('mouseenter', function(){ $(this).popoverHoverShow() }) .on('mouseleave', function(){ $(this).popoverHoverHide() }) .on('click', function(){ $(this).popoverClickToggle() }); };
用法示例：
$('[data-toggle=popover]').pinnablepopover({html: true, container: 'body'});
看到所有回答后，我认为这将是有益的。你可以pipe理你需要的一切。 许多答案不会使延迟我使用这个。 它的工作非常好，在我的项目
/ ****** / ****************************************** ******************* /
<div class='thumbnail' data-original-title='' style='width:50%'> <div id='item_details' class='popper-content hide'> <div> <div style='height:10px'> </div> <div class='title'>Bad blood </div> <div class='catagory'>Music </div> </div> </div> HELLO POPOVER </div>"
/ ****************脚本代码******************请使用HEAR ****** /
$(".thumbnail").popover({ trigger: "manual" , html: true, animation:true, container: 'body', placement: 'auto right', content: function () { return $(this).children('.popper-content').html(); }}) .on("mouseenter", function () { var _this = this; $('.thumbnail').each(function () { $(this).popover('hide'); }); setTimeout(function(){ if ($(_this).is(':hover')) { $(_this).popover("show"); } },1000); $(".popover").on("mouseleave", function () { $('.thumbnail').each(function () { $(this).popover('hide'); }); $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 100); });
现在我只是切换到webuiPopover，它只是工作。
