Bootstrap5 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-bs-toggle="popover"zu einem Element, um ein Popover zu erstellen.

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

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover-Titel" data-bs-content="Popover-Inhalt">Klicken Sie mich mehrmals an</button>

Hinweis:Das Popover muss im JavaScript-Initialisierungscode geschrieben werden.

Im folgenden Beispiel können Popovers überall im Dokument verwendet werden:

Beispiel

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl) })

Ausprobieren »

Die Position des Popovers festlegen

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

Sie könnendata-bs-placementals Attribut verwenden, um die Richtung festzulegen, in der das Popover erscheint: oben, unten, links oder rechts:

Beispiel

<a href="#" title="Titel" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Ich bin der Inhaltsteil">Klicken Sie auf mich</a> <a href="#" title="Titel" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Ich bin der Inhaltsteil">Klick mich</a> <a href="#" title="Titel" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Ich bin der Inhaltsteil">Klick mich</a> <a href="#" title="Titel" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Ich bin der Inhaltsteil">Klick mich</a>

Ausprobieren »

Popover schließen

Standardmäßig wird das Popover geschlossen, nachdem erneut auf das angegebene Element geklickt wurde. Sie könnendata-bs-trigger="focus"das Attribut verwenden, um festzulegen, dass das Popover geschlossen wird, wenn außerhalb des Elements geklickt wird:

Beispiel

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

Ausprobieren »

Tipp:Wenn Sie den Effekt erzielen möchten, dass etwas angezeigt wird, wenn die Maus über das Element fährt, und ausgeblendet wird, wenn sie sich entfernt, können Siedata-bs-triggerdas Attribut verwenden und den Wert auf "hover" setzen:

Beispiel

<a href="#" title="Titel" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Etwas Inhalt">Fahre mit der Maus über mich</a>

Ausprobieren »
Weitere Erweiterungen