在popover被徘徊的时候，我怎样才能保持bootstrap popover？
我正在使用twitter boostrap的popup窗口来创build一个hover卡来显示用户信息，我在这里触发mouseover检查jsfiddle的popup。 我想保持这个popover，而它被徘徊。
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
$('#example').popover({ html : true, trigger : 'manual', content : function() { return '<div class="box"></div>'; } }); $(document).on('mouseover', '#example', function(){ $('#example').popover('show'); }); $(document).on('mouseleave', '#example', function(){ $('#example').popover('hide'); });
你可以想到Facebook的hover卡的工作。 我想以同样的方式。 我该怎么做？
在Plunker中查看这个工作代码
小修改（从vikas提供的解决scheme），以适应我的使用情况。
1.在popoverbutton的hover事件上打开popup窗口
2.将鼠标hover在popup框上时，保持popup状态
3.closurespopupbutton或popup框，在mouseleave上closurespopup窗口。
$(".pop").popover({ trigger: "manual" , html: true, animation:false}) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 300); });
在Plunker玩它
我已经来到另一个解决scheme…这是代码
$('.selector').popover({ html: true, trigger: 'manual', container: $(this).attr('id'), placement: 'top', content: function () { $return = '<div class="hover-hovercard"></div>'; } }).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); });
这是我的看法： http : //jsfiddle.net/WojtekKruszewski/Zf3m7/22/
有时将鼠标从popup式触发器移动到对angular线的实际popup式内容时，可以将鼠标hover在下面的元素上。 我想处理这种情况 – 只要在超时之前触发popup式内容，就是安全的（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); }); }) } };
我使用触发器设置hover ，并将容器设置为#element ，最后在right添加一个box 。
这应该是你的设置：
$('#example').popover({ html: true, trigger: 'hover', container: '#example', placement: 'right', content: function () { return '<div class="box"></div>'; } });
和#example css需要position:relative; 检查下面的jsfiddle：
https://jsfiddle.net/9qn6pw4p/1/
编辑
这小提琴有两个工作没有问题的链接http://jsfiddle.net/davidchase03/FQE57/4/
这是我如何在networking上的其他位的帮助下做bootstrap popover。 dynamic获取现场展示的各种产品的标题和内容。 每个产品或popover获得唯一的ID。 退出产品（$ this .pop）或popup窗口时，popup消失将消失。 超时用于显示popup窗口，直到通过产品退出而不是popup窗口。
$(".pop").each(function () { var $pElem = $(this); $pElem.popover( { html: true, trigger: "manual", title: getPopoverTitle($pElem.attr("id")), content: getPopoverContent($pElem.attr("id")), container: 'body', animation:false } ); }).on("mouseenter", function () { var _this = this; $(this).popover("show"); console.log("mouse entered"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }).on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 100); }); function getPopoverTitle(target) { return $("#" + target + "_content > h3.popover-title").html(); }; function getPopoverContent(target) { return $("#" + target + "_content > div.popover-content").html(); };
我认为一个简单的方法是这样的：
$('.popover').each(function () { var $this = $(this); $this.popover({ trigger: 'hover', content: 'Content Here', container: $this }) });
这样popover就是在目标元素本身内部创build的。 所以当你将鼠标移到popup窗口上时，仍然是在元素上面。 Bootstrap 3.3.2可以很好地与此结合。 较旧的版本可能有一些animation问题，所以你可能想禁用“animation：假”
所选答案有效，但如果popup窗口以body为容器进行初始化，将会失败。
$('a').popover({ container: 'body' });
基于所选答案的解决scheme是在使用popup窗口之前需要放置的以下代码。
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) { self.$tip.one('mouseenter', function() { clearTimeout(self.timeout); self.$tip.one('mouseleave', function() { $.fn.popover.Constructor.prototype.leave.call(self, self); }); }) } };
使用self.$tip而不是遍历DOM期望的变化是最小化，期望popover总是元素的同胞。
这是我devise的一个解决scheme，似乎可以正常工作，同时还允许您使用正常的Bootstrap实现打开所有popup窗口。
原始小提琴： https ： //jsfiddle.net/eXpressive/hfear592/
移植到这个问题：
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a> $('#example').popover({ html : true, trigger : 'hover', content : function() { return '<div class="box"></div>'; } }).on('hide.bs.popover', function () { if ($(".popover:hover").length) { return false; } }); $('body').on('mouseleave', '.popover', function(){ $('.popover').popover('hide'); });
工具提示也是如此：
对于我来说，下面的解决scheme是可行的，因为它不会在每个“mouseenter”中添加事件侦听器，并且可以将其hover在工具提示元素上，从而使工具提示保持活跃状态。
$ -> $('.element').tooltip({ html: true, trigger: 'manual' }). on 'mouseenter', -> clearTimeout window.tooltipTimeout $(this).tooltip('show') unless $('.tooltip:visible').length > 0 . on 'mouseleave', -> _this = this window.tooltipTimeout = setTimeout -> $(_this).tooltip('hide') , 100 $(document).on 'mouseenter', '.tooltip', -> clearTimeout window.tooltipTimeout $(document).on 'mouseleave', '.tooltip', -> trigger = $($(this).siblings('.element')[0]) window.tooltipTimeout = setTimeout -> trigger.tooltip('hide') , 100
Vikas回答完美的作品，在这里我也join延迟支持（显示/隐藏）。
var popover = $('#example'); var options = { animation : true, html: true, trigger: 'manual', placement: 'right', delay: {show: 500, hide: 100} }; popover .popover(options) .on("mouseenter", function () { var t = this; var popover = $(this); setTimeout(function () { if (popover.is(":hover")) { popover.popover("show"); popover.siblings(".popover").on("mouseleave", function () { $(t).popover('hide'); }); } }, options.delay.show); }) .on("mouseleave", function () { var t = this; var popover = $(this); setTimeout(function () { if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) { $(t).popover("hide") } }, options.delay.hide); });
另外请注意我改变了：
if (!$(".popover:hover").length) {
有：
if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
以便它在那个开放的popover中正确地引用，而不是其他的（因为现在通过这个延迟，可以同时打开多于一个）
这个解决scheme对我来说很好：（现在是防弹的）;-)
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')) { $(_this).popover('hide'); } } }, 200); }); }
$(function() { $("[data-toggle = 'popover']").popover({ placement: 'left', html: true, trigger: " focus", }).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); }); });
我同意最好的方法是使用David Chase ，Cu Ly和其他人所说的最简单的方法是使用container: $(this)属性如下：
$(selectorString).each( var $this = $(this); $this.popover({ html: true, placement: "top", container: $this, trigger: "hover", title: "Popover", content: "Hey, you hovered on element" }); );
我想在这里指出，这种情况下的popup将inheritance当前元素的所有属性 。 因此，例如，如果您为.btn元素（引导程序）执行此操作， 您将无法在popup窗口中select文本 。 只是想logging下来，因为我花了很多时间在这个问题上敲了一下头。
