Att skapa popovers med Bootstrap 5 innebär att man använder en kombination av HTML, CSS och JavaScript. Här är en steg-för-steg-guide:
1. Inkludera Bootstrap:
- Se till att Bootstrap 5 ingår i ditt projekt. Du kan ladda ner den från Bootstraps webbplats eller använda ett CDN.
2. HTML-struktur:
- Skapa en knapp eller länkelement som kommer att utlösa popover. Lägg till attributet "data-bs-toggle" med värdet "popover", och lägg även till attributet "data-bs-content" med innehållet i popover.
- För popover-behållaren, lägg till ett `
`-element med attributet `data-bs-popover`.
```html
```
3. CSS:
- Lägg till de nödvändiga CSS-stilarna för popover, som att placera och utforma pilen och innehållet.
``` css
.popover {
z-index:1070 !viktigt;
}
```
4. JavaScript:
- Initiera popover med JavaScript. Du kan använda antingen jQuery eller vanilla JavaScript.
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) {
returnera ny bootstrap.Popover(popoverTriggerEl)
})
```
Nu, när du klickar på utlösarknappen eller länken, bör popover-fönstret med det angivna innehållet visas. Du kan ytterligare anpassa utseendet och beteendet för popover med ytterligare alternativ och attribut. Se Bootstrap-dokumentationen för mer information.