Ich habe ein bodenorientiertes Popover, das ich gerne etwas verzeihen würde 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 muss es geöffnet lassen, solange sich die Maus über dem Auslöser oder dem Popover-Inhalt befindet, aber das ist für den Benutzer schwierig, da er mit der Maus vom Auslöserelement zum Pfeil zum Inhalt wechseln muss, ohne diese Bereiche zu verlassen um mit dem Popover zu interagieren. Zwei Lösungen, die beide nicht funktionieren:

1) Die Verzögerungsoption sollte dies tun. Hinzufügendelay: {hide: 500} Bei einem Popover-Aufruf bleibt das Popover nach dem Verlassen der Maus geöffnet. Wenn Sie jedoch das Auslöseelement oder das Popover erneut eingeben, bevor es verschwindet, wird Bootstrap nicht angewiesen, das Popover offen zu halten, sodass es nach Ablauf des anfänglichen Timeouts nicht mehr angezeigt wird.

2) Verbreitern Sie das enthaltende Element des Pfeils, so dass die Maus, die vom Auslöserelement zum Hintergrund zwischen Auslöserelement und Popover zum Popover wechselt, funktioniert (die Maus hätte dann niemals den Auslöser / das Element verlassen). Die folgenden Arbeiten außer dem Pfeil werden mit überlappenden CSS-Rändern gezeichnet, sodass der Hintergrund nicht transparent ist:http://jsfiddle.net/HAZS8/

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

Die Problemumgehung besteht darin, die Mouseover- und MouseLeave-Ereignisse fest mit JQuery zu verknüpfen oder den Pfeil mit überlappenden Rändern durch ein Bild zu ersetzen. Bessere Lösungen?