Das Popover Plugin
Das Popover Plugin ist ähnlich wie Tooltips; es ist ein Pop-up-Fenster, das erscheint, wenn der Benutzer auf ein Element klickt. Der Unterschied ist , dass die popover viel mehr Inhalt enthalten kann.
Tipp: Plugins können einzeln aufgenommen werden (unter Verwendung von Bootstrap's einzelnen "popover.js" Datei) oder alle auf einmal (mit "bootstrap.js" oder "bootstrap.min.js" ).
Wie man ein erstellen Popover
Um einen erstellen popover , fügen Sie die data-toggle="popover" Attribut auf ein Element.
Verwenden Sie den title - Attribut , die Überschrift des popover angeben, und verwenden Sie die data-content - Attribut den Text angeben , die innerhalb der angezeigt werden soll popover's Körpers:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Hinweis: Popovers muss mit jQuery initialisiert werden: das angegebene Element wählen und den Anruf popover() Methode.
Der folgende Code wird alle ermöglichen popovers in dem Dokument:
Beispiel
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Versuch es selber " Positionierung Popovers
Standardmäßig ist die popover wird auf der rechten Seite des Elements angezeigt.
Verwenden Sie die data-placement Attribut die Position des zu setzen popover oben, unten, links oder rechts des Elements:
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>
Versuch es selber " Tipp: Sie können auch die Daten-Platzierung Attribut mit einem Wert von verwenden "auto" , die der Browser die Position des entscheiden lassen popover . Zum Beispiel, wenn der Wert "auto left" , die popover auf der linken Seite , wenn möglich angezeigt werden, da sonst auf der rechten Seite .
Schließen Popovers
Standardmäßig ist die popover wird geschlossen , wenn Sie auf das Element , klicken Sie erneut. Sie können jedoch die Verwendung data-trigger="focus" Attribut , das das schließt popover wenn 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>
Versuch es selber " Tipp: Wenn Sie wollen , dass die popover angezeigt werden , wenn Sie mit dem Mauszeiger über das Element bewegen, verwenden Sie die data-trigger - Attribut mit einem Wert von "hover" :
Beispiel
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Versuch es selber " Füllen Sie Bootstrap Popover Referenz
Eine vollständige Referenz aller popover Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Popover Referenz .