Bootstrap 4 -Kurzinfo
Bootstrap 4-Kurzinfo
Die Tooltip-Komponente ist ein kleines Popup-Fenster, das angezeigt wird, wenn der Benutzer den Mauszeiger über ein Element bewegt:
So erstellen Sie einen Tooltip
Um einen Tooltip zu erstellen, fügen Sie das data-toggle="tooltip"
Attribut zu einem Element hinzu.
Verwenden Sie das titleAttribut, um den Text anzugeben, der im Tooltip angezeigt werden soll:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Hinweis: QuickInfos müssen mit jQuery initialisiert werden: Wählen Sie das angegebene Element aus und rufen Sie die tooltip()Methode auf.
Der folgende Code aktiviert alle QuickInfos im Dokument:
Beispiel
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Positionierungs-Tooltips
Standardmäßig wird der Tooltip über dem Element angezeigt.
Verwenden Sie das data-placementAttribut, um die Position des Tooltips auf der oberen, unteren, linken oder rechten Seite des Elements festzulegen:
Beispiel
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Vollständige Bootstrap-Tooltip-Referenz
Eine vollständige Referenz aller Tooltip-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap JS-Tooltip-Referenz .