Bootstrap - Popovers: Ein Anfängerguide

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der Bootstrap Popovers. Machen Sie sich keine Sorgen, wenn Sie neu dabei sind; ich werde Sie bei jedem Schritt mit der gleichen Geduld führen, die ich in meinen Kursen seit Jahren anwende. Am Ende dieses Tutorials werden Sie Popovers wie ein Profi einblenden können!

Bootstrap - Popovers

Was sind Popovers?

Bevor wir loslegen, lassen Sie uns verstehen, was Popovers sind. Stellen Sie sich vor, Sie lesen ein Buch und daneben einem Wort steht ein kleines Sternchen. Wenn Sie nach unten auf der Seite schauen, finden Sie zusätzliche Informationen zu diesem Wort. Genau das tut ein Popover auf einer Webseite – er bietet zusätzliche Informationen, wenn ein Benutzer mit einem Element interagiert.

Popovers aktivieren

Zuerst müssen wir Popovers aktivieren. Das ist so, als ob man das Licht anmacht, bevor man liest – man muss erst alles einrichten, bevor man es verwenden kann.

Um Popovers zu aktivieren, müssen Sie die JavaScript- und CSS-Dateien von Bootstrap in Ihr HTML-Dokument einbetten. So geht es:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Ihr Inhalt kommt hier hin -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

Dieser Code richtet die grundlegende Struktur eines HTML-Dokuments ein und bindet die CSS- und JavaScript-Dateien von Bootstrap ein. Das Skript am Ende initialisiert alle Popovers auf der Seite.

Ein Popover erstellen

Nun, da wir die Bühne bereitet haben, lassen Sie uns unseren ersten Popover erstellen! Es ist so einfach wie das Hinzufügen einiger Attribute zu einer Schaltfläche.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover-Titel" data-bs-content="Und hier ist einige erstaunliche Inhalte. Es ist sehr fesselnd. Nicht wahr?">Klicken, um Popover umzuschalten</button>

Lassen Sie uns das auseinandernehmen:

class="btn btn-lg btn-danger": Dies macht unsere Schaltfläche groß und rot.
data-bs-toggle="popover": Diesweist Bootstrap an, dass dieses Element einen Popover auslösen soll.
title="Popover-Titel": Dies setzt den Titel unseres Popovers.
data-bs-content="...": Dies ist der Hauptinhalt unseres Popovers.

Positionierung eines Popovers

Genau wie das Arrangieren von Möbeln in einem Raum können Sie Ihren Popover auf verschiedene Weise positionieren. Bootstrap ermöglicht es Ihnen, Popovers oben, rechts, unten oder links eines Elements zu platzieren.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Oben Popover">
Popover oben
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Rechts Popover">
Popover rechts
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Unten Popover">
Popover unten
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Links Popover">
Popover links
</button>

Das Attribut data-bs-placement bestimmt, wo der Popover relativ zur Schaltfläche erscheint.

Individuelle Popovers

Möchten Sie Ihren Popovers eine persönliche Note hinzufügen? Sie können sie mit eigenem HTML-Inhalt anpassen!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Individueller Titel</h3>" data-bs-content="<b>Fett</b> Inhalt. <a href='#'>Link</a> enthalten.">
Individueller HTML-Popover
</button>

Hier haben wir data-bs-html="true" gesetzt, um HTML in unserem Popover-Inhalt zu erlauben. Jetzt können wir HTML-Tags in unserem Titel und Inhalt verwenden!

Entfernbarer Popover

Manchmal möchten Sie, dass Ihr Popover bleibt, bis der Benutzer ihn explizit schließt. Hier kommen entfernbare Popovers ins Spiel.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Entfernbarer Popover" data-bs-content="Und hier ist einige erstaunliche Inhalte. Es ist sehr fesselnd. Nicht wahr?">Entfernbarer Popover</a>

Der Schlüssel hier ist data-bs-trigger="focus". Das bedeutet, der Popover bleibt offen, bis der Benutzer irgendwo anders auf der Seite klickt.

Hover eines Popovers

Möchten Sie, dass Ihr Popover erscheint, wenn der Benutzer über ein Element hovers? Einfach wie ein Kinderspiel!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Hover über mich!">
Hover, um Popover auszulösen
</button>

Das Attribut data-bs-trigger="hover" lässt den Popover erscheinen, wenn der Benutzer hovernimmt.

Popover auf deaktivierten Elementen

Normalerweise lösen deaktivierte Elemente keine Benutzerinteraktionen aus. Aber mit einem kleinen Trick können wir Popovers auch darauf funktionieren lassen!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Deaktiverter Popover">
<button class="btn btn-primary" type="button" disabled>Deaktivierte Schaltfläche</button>
</span>

Wir umwickeln unsere deaktivierte Schaltfläche in ein <span>, das die Popover-Auslösung übernimmt.

Optionen

Bootstrap bietet eine Vielzahl von Optionen zur Anpassung Ihrer Popovers. Hier ist eine Tabelle einige häufiger verwendeter Optionen:

Option	Typ	Standard	Beschreibung
animation	boolean	true	Wendet eine CSS-Übergangsanimation auf den Popover an
container	string \| element \| false	false	Fügt den Popover an einen bestimmten Element an
content	string \| element \| function	''	Standardinhalt, wenn das `data-bs-content`-Attribut nicht vorhanden ist
delay	number \| object	0	Verzögerung beim Anzeigen und Verbergen des Popovers (ms)
html	boolean	false	Erlaubt HTML im Popover
placement	string \| function	'right'	Wie der Popover positioniert werden soll
selector	string \| false	false	Wenn ein Selektor angegeben wird, werden Popover-Objekte an die angegebenen Ziele delegiert
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	Basis-HTML, das bei der Erstellung des Popovers verwendet wird
title	string \| element \| function	''	Standardtitel, wenn das `title`-Attribut nicht vorhanden ist
trigger	string	'click'	Wie der Popover ausgelöst wird - click \| hover \| focus \| manual

Sie können diese Optionen verwenden, wenn Sie Popovers mit JavaScript initialisieren:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

Und das war's! Sie sind jetzt ein Profi in Bootstrap Popovers. Denken Sie daran, der Schlüssel zum Beherrschen dieses (und jedes anderen Programmierkonzepts) ist die Übung. Also los, spielen Sie mit diesen Beispielen, mischen und kombinieren Sie sie und erstellen Sie etwas Awesome. Viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Platzhalter

Nächstes Tutorial:

Bootstrap - Fortschrittsanzeige