twitter-bootstrap Twitter 引导程序 2.3.2 弹出框在悬停时保持打开状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16740125/
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
Twitter bootstrap 2.3.2 popover stay open while hovering
提问by user941238
I have a bottom-oriented popover that I'd like to be a bit more forgiving than the default popover, which vanishes as soon as the mouse leaves the trigger.
我有一个面向底部的弹出框，我希望它比默认弹出框更宽容一些，默认弹出框在鼠标离开触发器后立即消失。
$('#example').popover({
html: true,
trigger: 'hover',
container: '#example',
placement: 'bottom',
content: function () {
return '<div class="box">here is some content</div>';
}
});
I've got it to stay open as long as the mouse is over the trigger or the popover content, but that's tough for the user, since they've got to mouse from the trigger element to the arrow to the content without leaving those areas in order to interact with the popover. Two solutions in mind, neither is working:
只要鼠标悬停在触发器或弹出框内容上，我就让它保持打开状态，但这对用户来说很难，因为他们必须在不离开这些区域的情况下将鼠标从触发器元素移动到箭头再到内容为了与popover进行交互。两种解决方案，都不起作用：
1) the delay option ought to do this. adding
delay: {hide: 500}to the popover call leaves the popover open after the mouse leaves, but re-entering the trigger elem or the popover before it disappears does not tell bootstrap to keep the popover open, so goes away at the end of the initial timeout.
1）延迟选项应该这样做。添加
delay: {hide: 500}到 popover 调用会在鼠标离开后使 popover 保持打开状态，但是在它消失之前重新进入触发器 elem 或 popover 不会告诉引导程序保持 popover 打开，因此在初始超时结束时消失。
2) widen the arrow's containing element so that the mouse going from trigger element to background between trigger element and popover to popover works (the mouse then would never have left the trigger/element). The following works except the arrow is drawn with overlapping CSS borders, so the background is not transparent: http://jsfiddle.net/HAZS8/
2）加宽箭头的包含元素，以便鼠标从触发元素到触发元素和弹出框之间的背景到弹出框工作（鼠标将永远不会离开触发器/元素）。除了箭头是用重叠的 CSS 边框绘制，所以背景不透明外，以下工作：http: //jsfiddle.net/HAZS8/
.popover.bottom .arrow {
left: 0%;
padding-left:50%;
padding-right:50%;
}
The workaround is to hard-wire the mouseover and mouseleave events with jquery, or to replace the overlapping-borders arrow with an image. Better fixes?
解决方法是使用 jquery 硬连线 mouseover 和 mouseleave 事件，或者用图像替换重叠边框箭头。更好的修复？
回答by kevin
I have a more generic approach to solving this one, which I'm using myself. It involves overloading the popover's hide function, checking if the associated tooltip is being hovered over, and reacts appropriately - rather than adding all that event handling & html5 data setting.
我有一种更通用的方法来解决这个问题，我自己也在使用这种方法。它涉及重载弹出窗口的隐藏功能，检查相关的工具提示是否被悬停，并做出适当的反应 - 而不是添加所有事件处理和 html5 数据设置。
(function($) {
var oldHide = $.fn.popover.Constructor.prototype.hide;
$.fn.popover.Constructor.prototype.hide = function() {
if (this.options.trigger === "hover" && this.tip().is(":hover")) {
var that = this;
// try again after what would have been the delay
setTimeout(function() {
return that.hide.call(that, arguments);
}, that.options.delay.hide);
return;
}
oldHide.call(this, arguments);
};
})(jQuery);
Load this after your bootstrap & jQuery sources.
在引导程序和 jQuery 源之后加载它。
回答by Ian
You can handle the showand hideevents for the popover:
您可以处理popover的show和hide事件：
$('#example').popover({
html: true,
trigger: 'hover',
container: '#example',
placement: 'bottom',
content: function () {
return '<div class="box">here is some content</div>';
},
animation: false
}).on({
show: function (e) {
var $this = $(this);
// Currently hovering popover
$this.data("hoveringPopover", true);
// If it's still waiting to determine if it can be hovered, don't allow other handlers
if ($this.data("waitingForPopoverTO")) {
e.stopImmediatePropagation();
}
},
hide: function (e) {
var $this = $(this);
// If timeout was reached, allow hide to occur
if ($this.data("forceHidePopover")) {
$this.data("forceHidePopover", false);
return true;
}
// Prevent other `hide` handlers from executing
e.stopImmediatePropagation();
// Reset timeout checker
clearTimeout($this.data("popoverTO"));
// No longer hovering popover
$this.data("hoveringPopover", false);
// Flag for `show` event
$this.data("waitingForPopoverTO", true);
// In 1500ms, check to see if the popover is still not being hovered
$this.data("popoverTO", setTimeout(function () {
// If not being hovered, force the hide
if (!$this.data("hoveringPopover")) {
$this.data("forceHidePopover", true);
$this.data("waitingForPopoverTO", false);
$this.popover("hide");
}
}, 1500));
// Stop default behavior
return false;
}
});
DEMO:http://jsfiddle.net/L4Hc2/
演示：http : //jsfiddle.net/L4Hc2/
It doesn't seem like there's anything built-in for the popover for the functionality you want, so this is what I came up with :)
对于您想要的功能，弹出窗口似乎没有内置任何内容，所以这就是我想出的:)
What's nice is that it only allows handlers to execute if they really should - if the popover is actually being hidden or actually being shown. Also, each instance of a popover is unique from each other, so there is no global trickery going on.
好的是它只允许处理程序在它们确实应该执行时执行 - 如果弹出窗口实际上被隐藏或实际显示。此外，popover 的每个实例彼此都是独一无二的，因此不会发生全局欺骗。
