Bootstrap4 Popover

Das Popover-Plugin ähnelt dem Tooltip; es wird nach dem Klick auf ein Element angezeigt. Im Gegensatz zum Tooltip kann es mehr Inhalt anzeigen.

So erstellen Sie ein Popover

Durch Hinzufügen vondata-toggle="popover"zum Element, um ein Popover zu erstellen.

titleDer Inhalt des Attributs ist der Titel des Popovers,data-contentDas Attribut zeigt den Textinhalt des Popovers an:

<a href="#" data-toggle="popover" title="Popover-Titel" data-content="Popover-Inhalt">Klicken Sie mehrmals auf mich</a>

Hinweis:Das Popover sollte im jQuery-Initialisierungscode geschrieben werden: Rufen Sie dann für das angegebene Element diepopover()-Methode auf.

Im folgenden Beispiel kann ein Popover an jeder Stelle im Dokument verwendet werden:

Beispiel

$(document).ready(function(){ $('[data-toggle="popover"]').popover(); });

Selbst ausprobieren »

Die Position des Popovers festlegen

Standardmäßig wird das Popover auf der rechten Seite des Elements angezeigt.

Sie könnendata-placementdas Attribut verwenden, um die Richtung festzulegen, in der das Popover angezeigt wird: oben, unten, links oder rechts:

Beispiel

<a href="#" title="Überschrift" data-toggle="popover" data-placement="top" data-content="Inhalt">Klick mich</a> <a href="#" title="Überschrift" data-toggle="popover" data-placement="bottom" data-content="Inhalt">Klick mich</a> <a href="#" title="Überschrift" data-toggle="popover" data-placement="left" data-content="Inhalt">Klick mich</a> <a href="#" title="Überschrift" data-toggle="popover" data-placement="right" data-content="Inhalt">Klick mich</a>

Selbst ausprobieren »

In Buttons verwendet:

Beispiel

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover oben </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover rechts </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover unten </button> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover links </button>

Selbst ausprobieren »

Popover schließen

Standardmäßig wird das Popover geschlossen, wenn erneut auf das angegebene Element geklickt wird. Sie können dasdata-trigger="focus"Attribut verwenden, um das Popover so einzustellen, dass es geschlossen wird, wenn außerhalb des Elements geklickt wird:

Beispiel

<a href="#" title="Popover ausblenden" data-toggle="popover" data-trigger="focus" data-content="Klicken Sie woanders im Dokument, um mich zu schließen">Klicken Sie mich</a>

Selbst ausprobieren »

Tipp:Wenn Sie den Effekt erzielen möchten, dass er beim Mouseover über dem Element angezeigt und beim Verlassen der Maus ausgeblendet wird, können Sie das Attributdata-triggerverwenden und den Wert auf "hover" setzen:

Beispiel

<a href="#" title="Überschrift" data-toggle="popover" data-trigger="hover" data-content="Etwas Inhalt">Fahren Sie mit der Maus über mich</a>

Selbst ausprobieren »

Andere Erweiterungen