Å lage popovers med Bootstrap 5 innebærer å bruke en kombinasjon av HTML, CSS og JavaScript. Her er en steg-for-steg guide:
1. Inkluder Bootstrap:
- Sørg for at Bootstrap 5 er inkludert i prosjektet ditt. Du kan laste den ned fra Bootstrap-nettstedet eller bruke et CDN.
2. HTML-struktur:
- Lag en knapp eller et lenkeelement som vil utløse popover. Legg til «data-bs-toggle»-attributtet med verdien «popover», og legg også til «data-bs-content»-attributtet med innholdet i popoveren.
- For popover-beholderen legger du til et `
`-element med attributtet `data-bs-popover`.
```html
```
3. CSS:
- Legg til de nødvendige CSS-stilene for popover, for eksempel plassering og styling av pilen og innholdet.
```css
.popover {
z-indeks:1070 !viktig;
}
```
4. JavaScript:
- Initialiser popover ved hjelp av JavaScript. Du kan bruke enten jQuery eller vanilla JavaScript.
jQuery:
```javascript
$(funksjon () {
$('[data-bs-toggle="popover"]').popover()
})
```
Vanilje JavaScript:
```javascript
var popoverTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList =popoverTriggerList.map(function (popoverTriggerEl) {
returner ny bootstrap.Popover(popoverTriggerEl)
})
```
Nå, når du klikker på utløserknappen eller koblingen, skal popover-vinduet med det angitte innholdet vises. Du kan tilpasse utseendet og oppførselen til popoveren ytterligere ved å bruke flere alternativer og attributter. Se Bootstrap-dokumentasjonen for mer informasjon.
