Das Erstellen von Tooltips in Bootstrap 5 ist ein unkomplizierter Prozess mit HTML, CSS und JavaScript. Befolgen Sie diese Schritte, um Tooltips zu Ihren Webelementen hinzuzufügen:

1. Bootstrap einschließen:

- Stellen Sie sicher, dass Ihr HTML-Code Bootstrap-CSS- und JavaScript-Dateien enthält. Stellen Sie sicher, dass Ihre JavaScript-Dateien direkt vor dem „“ platziert werden `-Tag.

2. HTML-Struktur:

- Fügen Sie das Element hinzu, dem Sie einen Tooltip hinzufügen möchten.

- Umschließen Sie den Text oder das Element, z. B. eine Schaltfläche, mit einem Ankertag „“ mit bestimmten HTML-Attributen.

- Fügen Sie innerhalb des „“-Tags ein „title“-Attribut ein, das den Inhalt des Tooltips angibt.

```html

Schwebe über mir

„

3. JavaScript-Initialisierung:

– Initialisieren Sie Tooltips mit JavaScript, indem Sie die folgende Zeile einfügen:

„Javascript

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

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

„

4. Zusätzliche Konfiguration hinzufügen:

- Geben Sie die Platzierung des Tooltips an, indem Sie das Datenplatzierungsattribut am Tag „“ ändern, z. B. „data-placement="top"` für Tooltip über dem Element oder `data-placement="bottom"`.