Bootstrap5 Tooltip
Ein Tooltip ist ein kleines Pop-up, das erscheint, wenn die Maus über ein Element bewegt wird, und verschwindet, wenn die Maus sich von dem Element entfernt.
Wie man einen Tooltip erstellt
Indem Sie einem Elementdata-bs-toggle="tooltip"hinzufügen, um einen Tooltip zu erstellen.
titleDer Inhalt des Attributs ist der im Tooltip angezeigte Inhalt:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Ich bin der Tooltip-Inhalt!">Bewegen Sie die Maus über mich</button>
Hinweis:Tooltips müssen im JavaScript-Initialisierungscode geschrieben werden: Rufen Sie dann dietooltip()-Methode für das angegebene Element auf.
Im folgenden Beispiel können Tooltips überall im Dokument verwendet werden:
Beispiel
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
Selbst ausprobieren »
Tooltip-Position angeben
Standardmäßig erscheint der Tooltip über dem Element.
Sie könnendata-bs-placementals Attribut verwenden, um die Richtung festzulegen, in der der Tooltip erscheint: top, bottom, left oder right:
Beispiel
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Ich bin der Tooltip-Inhalt!">Fahre mit der Maus über mich</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ich bin der Tooltip-Inhalt!">Fahren Sie mit der Maus über mich</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Ich bin der Tooltip-Inhalt!">Fahre mit der Maus über mich</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Ich bin der Tooltip-Inhalt!">Fahren Sie mit der Maus über mich</a>
Selbst ausprobieren »