Twitter Bootstrap 2.3.2 Popover bleibt während des Schwebens offen

Question

Ich habe ein bottom-orientiertes Popover, das ich etwas nachsichtiger sein möchte als das Standard-Popover, das verschwindet, sobald die Maus den Auslöser verlässt.

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

ich habe es so lange bleiben geöffnet, wie die Maus über den Auslöser oder den popover Inhalt ist, aber das ist hart für den Anwender, da sie von dem Auslöseelement auf den Pfeil Maus haben zum Inhalt, ohne diese Bereiche zu verlassen, um mit dem Popover zu interagieren. Zwei Lösungen im Auge, keine funktioniert:

1) die Verzögerung Option sollte dies tun. Wenn der Popover-Aufruf zum Popover geöffnet wird, bleibt das Popover nach dem Verlassen der Maus geöffnet, aber das erneute Aufrufen des Triggerelements oder des Popover, bevor es verschwindet, teilt dem Bootstrap nicht mit, dass das Popover geöffnet bleibt, sodass es am Ende des anfänglichen Timeouts verschwindet .

2) Erweitern Sie das containing-Element des Pfeils so, dass die Maus vom Trigger-Element zum Hintergrund zwischen Trigger-Element und Popover zu Popover geht (die Maus hätte dann den Trigger/Element nie verlassen). Die folgenden Arbeiten mit Ausnahme der Pfeil mit überlappenden CSS Grenzen gezogen, so dass der Hintergrund ist nicht transparent: http://jsfiddle.net/HAZS8/

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

dieses Problem umgehen, fest zu verdrahten die Mouseover- und Leave Ereignisse mit jquery, oder die sich überschneid-Grenzen zu ersetzen Pfeil mit einem Bild. Bessere Korrekturen?

Answer 1

Sie können die show und hide Ereignisse für den popover Griff:

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

Es scheint nicht, wie es alles, was für die Funktionalität für die popover Einbau-Sie wollen, so ist das, was ich mit :)

Was ist nett ist, dass es nur Handler ausführen können, wenn sie wirklich sollten - wenn das Popover wird tatsächlich versteckt oder tatsächlich gezeigt. Außerdem ist jede Instanz eines Popover einzigartig, sodass keine globalen Tricks stattfinden.

Answer 2

Ich habe einen allgemeineren Ansatz, um diesen zu lösen, den ich selbst benutze. Dazu gehört das Überladen der Verdeckungsfunktion des Popover, das Überprüfen, ob der zugehörige Tooltip über den Mauszeiger gezogen wird, und das entsprechende Reagieren - und nicht das Hinzufügen aller Event-Handling-Einstellungen für die html5-Daten &.

(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); 

Laden Sie diese nach der Bootstrap & jQuery Quellen.