Oprettelse af Bootstrap 5-værktøjstip er ligetil ved at bruge dets hjælpeklasser og JavaScript-funktionalitet. Sådan kan du opnå det:
HTML Markup:
1. Tilføj data-bs-toggle="værktøjstip" attribut til det element, du vil vise et værktøjstip for. Dette kan være en knap, et link eller et hvilket som helst andet passende element.
```html
```
Her er værktøjstip-titlen angivet direkte i elementets markup. Du kan også indstille tilpassede dataattributter som "data-bs-title" for at inkludere værktøjstip-indhold dynamisk i din JavaScript-kode.
Initialiseringsscript:
2. Inkluder Bootstraps JavaScript-pakke:
```html
```
Dette script kombinerer både Popper og Bootstrap JS, hvilket er nødvendigt for korrekt værktøjstip-funktionalitet.
JavaScript-konfiguration (valgfrit):
Du kan yderligere tilpasse værktøjstip-adfærden ved hjælp af JavaScript. Bootstrap giver klassen "Tooltip" til at interagere med værktøjstip programmatisk.
```javascript
var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList =tooltipTriggerList.map(function (tooltipTriggerEl) {
returner ny bootstrap.Tooltip(tooltipTriggerEl)
})
```
Ved at gentage alle elementer med attributten `data-bs-toggle="tooltip"` initialiserer dette script individuelle værktøjstip, hvilket giver mere kontrol over adfærd og mulighed for at administrere værktøjstip dynamisk, f.eks. når du tilføjer nye knapper til siden.
Når du nu holder markøren over et element med et defineret værktøjstip, vil du se Bootstrap 5-værktøjstip med det medfølgende indhold, der vises uden ekstra CSS-klasser eller stil. Den placerer sig automatisk i forhold til målelementet ved hjælp af Bootstraps intelligente positioneringsmotor.
