Bootstrap-4 -Popover
Bootstrap-4-Popover
Die Popover-Komponente ähnelt Tooltips; Es ist ein Popup-Fenster, das erscheint, wenn der Benutzer auf ein Element klickt. Der Unterschied besteht darin, dass das Popover viel mehr Inhalt enthalten kann.
Popover umschaltenSo erstellen Sie ein Popover
Um ein Popover zu erstellen, fügen Sie das data-toggle="popover"
Attribut zu einem Element hinzu.
Verwenden Sie das titleAttribut, um den Kopfzeilentext des Popovers anzugeben, und verwenden Sie das data-contentAttribut, um den Text anzugeben, der im Hauptteil des Popovers angezeigt werden soll:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Hinweis: Popover müssen mit jQuery initialisiert werden: Wählen Sie das angegebene Element aus und rufen Sie die popover()Methode auf.
Der folgende Code aktiviert alle Popover im Dokument:
Beispiel
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Popovers positionieren
Standardmäßig erscheint das Popover auf der rechten Seite des Elements.
Verwenden Sie das data-placementAttribut, um die Position des Popovers oben, unten, links oder rechts des Elements festzulegen:
Beispiel
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Hinweis: Die Platzierungsattribute funktionieren nicht wie erwartet, wenn nicht genügend Platz für sie vorhanden ist. Beispiel: Wenn Sie die obere Platzierung oben auf einer Seite verwenden (wo kein Platz dafür ist), wird stattdessen das Popover unter dem Element oder rechts (wo immer Platz dafür ist) angezeigt.
Popover schließen
Standardmäßig wird das Popover geschlossen, wenn Sie erneut auf das Element klicken. Sie können jedoch das data-trigger="focus"Attribut verwenden, das das Popover schließt, wenn Sie außerhalb des Elements klicken:
Beispiel
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Tipp: Wenn Sie möchten, dass das Popover angezeigt wird, wenn Sie den Mauszeiger über das Element bewegen, verwenden Sie das data-triggerAttribut mit dem Wert „hover“:
Beispiel
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Vollständige Bootstrap-Popover-Referenz
Eine vollständige Referenz aller Popover-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap JS Popover-Referenz .