Att skapa Bootstrap 5-verktygstips är enkelt med hjälp av dess verktygsklasser och JavaScript-funktionalitet. Så här kan du uppnå det:
HTML-märkning:
1. Lägg till data-bs-toggle="tooltip" attribut till elementet du vill visa ett verktygstips för. Detta kan vara en knapp, länk eller något annat lämpligt element.
```html
```
Här anges verktygstipsets titel direkt i elementets markering. Du kan också ställa in anpassade dataattribut som `data-bs-title` för att inkludera verktygstipsinnehåll dynamiskt i din JavaScript-kod.
Initieringsskript:
2. Inkludera Bootstraps JavaScript-paket:
```html
```
Detta skript kombinerar både Popper och Bootstrap JS, vilket är nödvändigt för korrekt verktygstipsfunktionalitet.
JavaScript-konfiguration (valfritt):
Du kan anpassa verktygstipsbeteendet ytterligare med JavaScript. Bootstrap tillhandahåller klassen "Tooltip" för att interagera med verktygstips programmatiskt.
```javascript
var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList =tooltipTriggerList.map(function (tooltipTriggerEl) {
returnera ny bootstrap.Tooltip(tooltipTriggerEl)
})
```
Genom att iterera igenom alla element med attributet `data-bs-toggle="tooltip"` initialiserar detta skript individuella verktygstips, vilket ger mer kontroll över beteendet och möjligheten att hantera verktygstips dynamiskt, t.ex. när nya knappar läggs till på sidan.
Nu, när du håller muspekaren över ett element med ett verktygstips definierat, kommer du att se Bootstrap 5-verktygstipset med det medföljande innehållet visas utan extra CSS-klasser eller stil. Den positionerar sig automatiskt i förhållande till målelementet med hjälp av Bootstraps intelligenta positioneringsmotor.
