webentwicklung-frage-antwort-db.com.de

Bootstrap Popover-Pfeil- und Box-Positionierung

Ich verwende Bootstrap-Popovers, um Informationen zu einem Link in hover anzuzeigen, bevor Sie auf den Link klicken .. __ Es ist momentan im Moment aktiv. Die Links werden jedoch über ein Dropdown-Menü oben auf der Seite angezeigt. Wenn der erste Link viele Informationen darüber enthält, wird der obere Bereich des Popovers oben auf der Seite ausgeblendet, sodass der Inhalt nicht angezeigt wird. Ich versuche, es so zu gestalten, dass der Popover-Pfeil oben links im Popover erscheint (im Gegensatz zu Mitte-Links, was er gerade macht) und der obere Rand des Popover-Felds auf einer Ebene mit dem Pfeil steht, wenn dies sinnvoll ist.

$('.popOver').popover({
    trigger: 'hover',
    html: true
});

Dies funktioniert gut, aber ich glaube nicht, dass mir Popover-Optionen hier helfen können. Es ist das CSS, das ich ändern muss, aber es ist ziemlich umfangreich zu posten. Ich suchte also nach jemandem mit Bootstrap-Kenntnissen, der mich in die richtige Richtung weist.
Vielen Dank.

13
Shamrockonov

Sie können die Platzierung des Popovers oder den Pfeil anpassen, um das .popover-CSS zu bearbeiten, sobald das Popover angezeigt wird.

Dies drückt beispielsweise die Oberseite des Popovers um 22 Pixel nach unten.

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

Arbeitsdemo: http://bootply.com/88325

24
Zim

Ich empfehle, die Platzierungsmethode anstelle des shown.bs.popover-Ereignisses zu verwenden. Dies löst keinen Popover-Sprung aus, wenn das Element angezeigt wird.

So funktioniert es:

$('[data-toggle=popover]').popover({
  placement: function(context, source) {
    var self = this;
    setTimeout(function() { 
      self.$arrow.css('top', 55);
      self.$tip.css('top', -45);
    }, 0);
    return 'right';
  },
});
5
HaNdTriX

Mein Anwendungsfall ist, dass die Popover-Platzierung top ist und ich den Pfeil entfernen muss. 

Ich habe die von @Skelly bereitgestellte Lösung verfolgt, während ich bootstrap 3.2.0 verwendet habe .. Ein Problem ist, dass der Popover-Flash als css-Eigenschaft top im shown.bs.popover aktualisiert wird.

Tatsächlich können Sie die template-Eigenschaft beim Initialisieren des Popovers überschreiben und etwas margin-top (margin-left, wenn die Platzierung links/rechts ist) hinzufügen.

$('[data-toggle=popover]').popover({
  placement: 'top',
  template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

demo: http://www.bootply.com/gWwmO5XdbL

2
Edward Fung

Ich hatte Probleme mit dem Popover, so dass ich es nicht sehen konnte. Das hat es für mich behoben

// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
  var arrow_position = parseInt($(this).position().top);
  $('.popover').css('top', 10 + 'px');
  $('.popover .arrow').css('top', arrow_position + 'px');
}
0
mikeytown2