Det er enkelt å lage Bootstrap 5-verktøytips ved å bruke verktøyklassene og JavaScript-funksjonaliteten. Slik kan du oppnå det:
HTML-oppmerking:
1. Legg til data-bs-toggle="tooltip" attributt til elementet du vil vise et verktøytips for. Dette kan være en knapp, lenke eller et annet passende element.
```html
```
Her spesifiseres verktøytipstittelen direkte i elementets markering. Du kan også angi egendefinerte dataattributter som `data-bs-title` for å inkludere verktøytipsinnhold dynamisk i JavaScript-koden din.
Initialiseringsskript:
2. Inkluder Bootstraps JavaScript-pakke:
```html
```
Dette skriptet kombinerer både Popper og Bootstrap JS, nødvendig for riktig verktøytipsfunksjonalitet.
JavaScript-konfigurasjon (valgfritt):
Du kan tilpasse verktøytipsatferden ytterligere ved å bruke JavaScript. Bootstrap gir 'Tooltip'-klassen for å samhandle med verktøytips programmatisk.
```javascript
var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList =tooltipTriggerList.map(function (tooltipTriggerEl) {
returner ny bootstrap.Tooltip(tooltipTriggerEl)
})
```
Ved å iterere gjennom alle elementene med `data-bs-toggle="tooltip"`-attributtet, initialiserer dette skriptet individuelle verktøytips, noe som gir mer kontroll over atferd og muligheten til å administrere verktøytips dynamisk, for eksempel når du legger til nye knapper på siden.
Nå, når du holder markøren over et element med et verktøytips definert, vil du se Bootstrap 5-verktøytipset med det medfølgende innholdet vises uten ekstra CSS-klasser eller stil. Den posisjonerer seg automatisk i forhold til målelementet ved hjelp av Bootstraps intelligente posisjoneringsmotor.
