Oprettelse af popovers med Bootstrap 5 involverer brug af en kombination af HTML, CSS og JavaScript. Her er en trin-for-trin guide:
1. Inkluder Bootstrap:
- Sørg for, at Bootstrap 5 er inkluderet i dit projekt. Du kan downloade det fra Bootstrap-webstedet eller bruge et CDN.
2. HTML-struktur:
- Opret en knap eller et linkelement, der vil udløse popover. Tilføj attributten 'data-bs-toggle' med værdien 'popover', og tilføj også attributten 'data-bs-content' med indholdet af popover.
- Til popover-beholderen skal du tilføje et `
`-element med attributten `data-bs-popover`.
```html
```
3. CSS:
- Tilføj de nødvendige CSS-stile til popover, såsom placering og styling af pilen og indholdet.
```css
.popover {
z-indeks:1070 !vigtigt;
}
```
4. JavaScript:
- Initialiser popover ved hjælp af JavaScript. Du kan bruge enten jQuery eller vanilla JavaScript.
jQuery:
```javascript
$(funktion () {
$('[data-bs-toggle="popover"]').popover()
})
```
Vanille JavaScript:
```javascript
var popoverTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList =popoverTriggerList.map(function (popoverTriggerEl) {
returner ny bootstrap.Popover(popoverTriggerEl)
})
```
Nu, når du klikker på udløserknappen eller linket, skulle popoveren med det angivne indhold vises. Du kan yderligere tilpasse udseendet og adfærden af popover ved hjælp af yderligere muligheder og attributter. Se Bootstrap-dokumentationen for flere detaljer.
