Bootstrap -Popover-Plugin
Das Popover-Plugin
Das Popover-Plugin ä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.
Tipp: Plugins können einzeln (unter Verwendung der individuellen „popover.js“-Datei von Bootstrap) oder alle auf einmal (unter Verwendung von „bootstrap.js“ oder „bootstrap.min.js“) eingebunden werden.
So 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>
Tipp: Sie können auch das data-placement-Attribut mit dem Wert „auto“ verwenden, wodurch der Browser die Position des Popovers bestimmt. Wenn der Wert beispielsweise "auto left" ist, wird das Popover nach Möglichkeit auf der linken Seite angezeigt, andernfalls auf der rechten Seite.
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 .