Twitter bootstrap 2.3.2 popover остается открытым во время зависания

У меня есть ориентированный на нижний слой popover, который я хотел бы быть немного более прощающим, чем по умолчанию, который исчезает, как только мышь покидает триггер.

$('#example').popover({
  html: true,
  trigger: 'hover',
  container: '#example',
  placement: 'bottom',
  content: function () {
      return '<div class="box">here is some content</div>';
  }
});

У меня есть это, чтобы оставаться открытым, пока мышь находится над триггером или содержимым popover, но это сложно для пользователя, так как они имеют мышь от триггерного элемента до стрелки до содержимого без оставляя эти области для взаимодействия с popover. Два решения в виду не работают:

1) вариант задержки должен сделать это. добавление   delay: {hide: 500} вызов popover оставляет popover открытым после того, как мышь уходит, но повторный ввод триггерного элемента или popover перед его исчезновением не указывает загрузочному блоку, чтобы он оставался открытым, поэтому уходит в конце начального таймаута.

2) расширьте стрелку, содержащую элемент, так что мышь, идущая от элемента триггера до фона между триггерным элементом и popover to popover (мышь тогда никогда не оставила бы триггер/элемент). Следующие работы за исключением того, что стрелка рисуется с перекрывающимися границами CSS, поэтому фон не прозрачен: http://jsfiddle.net/HAZS8/

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

Обходной путь заключается в жесткой проводке событий mouseover и mouseleave с помощью jquery или для замены стрелки перекрывающихся границ изображением. Лучшие исправления?

Ответы

Ответ 1

Вы можете обрабатывать события show и hide для 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 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/

Кажется, нет ничего встроенного для popover для нужной вам функции, так что это то, что я придумал:)

Хорошо, что он позволяет обработчикам выполнять, если они действительно должны - если popover фактически скрывается или фактически отображается. Кроме того, каждый экземпляр popover уникален друг от друга, поэтому глобальная хитрость не происходит.

Ответ 2

У меня есть более общий подход к решению этого вопроса, который я использую сам. Это связано с перегрузкой функции popover hide, проверкой того, связана ли связанная всплывающая подсказка, и реагирует соответствующим образом - вместо того, чтобы добавлять все данные обработки событий и настройки данных 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);

Загрузите это после источников бутстрапа и jQuery.