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

Question

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

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

Я получил его оставаться открытыми до тех пор, пока курсор находится над пусковым или содержанием поповера, но это трудно для пользователя, так как они должны мыши от пускового элемента к стрелке к контенту, не выходя из этих областей, чтобы взаимодействовать с 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 или заменить перекрывающиеся границы стрелка с изображением. Лучшие исправления?

Answer 1

Вы можете обрабатывать 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/

Это не похоже, есть все, что встроенный в пирог для функциональности вы хочу, так вот что я придумал :)

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

Answer 2

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