Bootstrap -Tooltip-Plugin
Das Tooltip-Plugin
Das Tooltip-Plugin ist ein kleines Popup-Fenster, das erscheint, wenn der Benutzer den Mauszeiger über ein Element bewegt:
Tipp: Plugins können einzeln (unter Verwendung der individuellen „tooltip.js“-Datei von Bootstrap) oder alle auf einmal (unter Verwendung von „bootstrap.js“ oder „bootstrap.min.js“) eingebunden werden.
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>
Tipp: Sie können das data-placementAttribut auch mit dem Wert " auto" verwenden, wodurch der Browser die Position des Tooltips bestimmt. Wenn der Wert beispielsweise " auto left" ist, wird der Tooltip nach Möglichkeit auf der linken Seite angezeigt, andernfalls auf der rechten Seite.
Vollständige Bootstrap-Tooltip-Referenz
Eine vollständige Referenz aller Tooltip-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap JS-Tooltip-Referenz .