Das Erstellen von Popovers mit Bootstrap 5 erfordert die Verwendung einer Kombination aus HTML, CSS und JavaScript. Hier ist eine Schritt-für-Schritt-Anleitung:
1. Bootstrap einbinden:
- Stellen Sie sicher, dass Bootstrap 5 in Ihrem Projekt enthalten ist. Sie können es von der Bootstrap-Website herunterladen oder ein CDN verwenden.
2. HTML-Struktur:
- Erstellen Sie eine Schaltfläche oder ein Linkelement, das das Popover auslöst. Fügen Sie das Attribut „data-bs-toggle“ mit dem Wert „popover“ und außerdem das Attribut „data-bs-content“ mit dem Inhalt des Popovers hinzu.
- Fügen Sie für den Popover-Container ein „
“-Element mit dem „data-bs-popover“-Attribut hinzu.
```html
„
3. CSS:
- Fügen Sie die erforderlichen CSS-Stile für das Popover hinzu, z. B. Positionierung und Stil des Pfeils und des Inhalts.
„css
.popover {
Z-Index:1070 !important;
}
„
4. JavaScript:
- Initialisieren Sie das Popover mit JavaScript. Sie können entweder jQuery oder Vanilla JavaScript verwenden.
jQuery:
„Javascript
$(Funktion () {
$('[data-bs-toggle="popover"]').popover()
})
„
Vanilla-JavaScript:
„Javascript
var popoverTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList =popoverTriggerList.map(function (popoverTriggerEl) {
Wenn Sie nun auf die Auslöseschaltfläche oder den Link klicken, sollte das Popover mit dem angegebenen Inhalt erscheinen. Sie können das Erscheinungsbild und Verhalten des Popovers mithilfe zusätzlicher Optionen und Attribute weiter anpassen. Weitere Informationen finden Sie in der Bootstrap-Dokumentation.
