Twitter Bootstrap 2.3.2 popover pozostać otwarte podczas unoszące

Question

Mam dolną zorientowanych popover że chciałbym być nieco bardziej wyrozumiały niż domyślny popover, która znika tak szybko, jak opuszcza mysz spust.

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

Mam go zatrzymać otwarte tak długo, jak myszy znajduje się nad spustem lub treści popover, ale to trudne dla użytkownika, ponieważ mamy do myszy z elementu wyzwalającego do strzałki do treści bez opuszczania tych obszarów w celu interakcji z popover. Dwa rozwiązania w umyśle, nie ma pracy:

1) Opcja opóźnienia powinien to zrobić. dodanie delay: {hide: 500} na wezwanie popover opuszcza popover otwarty po liściach myszką, ale ponownie wpisując ELEM wyzwalania lub popover zanim zniknie nie powiedzieć bootstrap zachować popover otwarte, więc odchodzi pod koniec początkowego limitu czasu .

2) poszerz element zawierający strzałkę tak, aby mysz przechodziła od elementu wyzwalającego do tła pomiędzy elementem wyzwalającym a popover do popover działa (mysz wtedy nigdy nie opuściłaby wyzwalacza/elementu). Następujące prace wyjątkiem strzałką jest zasysane z nakładających się granice CSS, więc tło nie jest przejrzysta: http://jsfiddle.net/HAZS8/

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

Rozwiązaniem jest twardym drutem mouseover i mouseLeave zdarzenia z jQuery lub zastąpienie nakładających-granic strzałka z obrazem. Lepsze poprawki?

Answer 1

można obsługiwać show i hide zdarzenia dla 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/

To nie wydaje się tam coś wbudowane do popover dla funkcjonalności ty chcą, więc to, co wymyśliłem :)

Co miłe jest to, że tylko pozwala koparki do wykonania jeśli naprawdę powinien - jeśli popover jest rzeczywiście ukrywany lub faktycznie pokazywany. Ponadto każde wystąpienie popover jest unikalne od siebie nawzajem, więc nie ma żadnych globalnych oszustw.

Answer 2

Mam bardziej ogólne podejście do rozwiązania tego, z którego korzystam. Obejmuje on przeciążanie funkcji ukrywania okna, sprawdzanie, czy przypisana etykieta narzędziowa jest podskakiwana i odpowiednio reaguje - zamiast dodawać całe to ustawienie obsługi zdarzeń do 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); 

załadować po swojej bootstrap & źródła jQuery.