Twitter bootstrap 2.3.2 popover在悬停时保持打开 [英] Twitter bootstrap 2.3.2 popover stay open while hovering

问题描述

我有一个面向底部的popover，我想要比默认的popover更宽容，一旦鼠标离开触发器就消失。

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>';
  }
});

我已经让它保持打开，只要鼠标超过触发器或popover内容，但这对用户来说很难，因为他们必须将鼠标从触发器元素移动到箭头到内容，而不会离开这些区域，以便与popover进行交互。有两种解决方案，两种都不工作：

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:

1）延迟选项应该这样做。在鼠标离开后，向popover调用添加
delay：{hide：500}
会使popover打开，但重新输入触发器elem在它消失之前的popover不告诉bootstrap保持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.

2）加宽箭头的包含元素，使鼠标从触发元素到触发元素和popover之间的背景，以便弹出工作（鼠标从不会离开触发器/元素）。以下作品（箭头除外）使用重叠的CSS边框绘制，因此背景不透明： http://jsfiddle.net/HAZS8/

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/

.popover.bottom .arrow {
    left: 0%;
    padding-left:50%;
    padding-right:50%;
}

解决方法是使用jquery硬连线mouseover和mouseleave事件，以用图像替换重叠边界箭头。更好的修复？

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?

推荐答案

您可以处理 show 和 hide popover的事件：

You can handle the show and hide events for the popover:

$('#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/

似乎没有任何内建的弹出式窗口你想要的功能，所以这是我想出来的）

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 :)

很好的是，它只允许处理程序执行，如果他们真的应该 - 如果popover实际上隐藏或实际显示。另外，popover的每个实例彼此是唯一的，所以没有全局的诡计。

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.

这篇关于Twitter bootstrap 2.3.2 popover在悬停时保持打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！