Hur man skapar Bootstrap 5 Tooltips?

Att skapa verktygstips i Bootstrap 5 är en enkel process som involverar HTML, CSS och JavaScript. Följ dessa steg för att lägga till verktygstips till dina webbelement:

1. Inkludera Bootstrap:

- Se till att inkludera Bootstrap CSS- och JavaScript-filer i din HTML-kod. Se till att dina JavaScript-filer placeras precis före ` ` tag.

2. HTML-struktur:

- Lägg till elementet du vill bifoga ett verktygstips till.

- Linda in texten eller elementet, till exempel en knapp, med en ankartagg "" med specifika HTML-attribut.

- Inuti taggen ``, inkludera ett `title`-attribut som anger verktygstipsets innehåll.

```html

Håll muspekaren över mig

```

3. JavaScript-initiering:

- Initiera verktygstips med JavaScript genom att inkludera följande rad:

```javascript

var tooltipTriggerList =document.querySelectorAll('[data-bs-toggle="tooltip"]');

var tooltipList =[...tooltipTriggerList].map(tooltipTriggerEl => ny bootstrap.Tooltip(tooltipTriggerEl));

```

4. Lägg till ytterligare konfiguration:

- Ange placeringen av verktygstipset genom att ändra dataplaceringsattributet på taggen ``, t.ex. `data-placement="top"` för verktygstips ovanför elementet eller `data-placement="bottom"`.