Der Tooltip Plugin
Der Tooltip Plugin ist kleines Pop-up-Fenster, das erscheint, wenn der Benutzer den Mauszeiger über ein Element bewegt:
Tipp: Plugins können einzeln aufgenommen werden (unter Verwendung von Bootstrap's einzelnen "tooltip.js" Datei) oder alle auf einmal (mit "bootstrap.js" oder "bootstrap.min.js" ).
Wie man einen Tooltip erstellen
Um einen Tooltip zu erstellen, fügen Sie die data-toggle="tooltip" Attribut auf ein Element.
Verwenden Sie den title - Attribut , um den Text angeben, der innerhalb des Tooltip angezeigt werden sollen:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> Hinweis: Tooltips muss mit jQuery initialisiert werden: das angegebene Element wählen und rufen Sie den tooltip() Methode.
Der folgende Code wird alle Tooltips im Dokument zu aktivieren:
Beispiel
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Versuch es selber " Positionierung Tooltips
Standardmäßig wird der Tooltip auf der Oberseite des Elements angezeigt.
Verwenden Sie die data-placement Attribut die Position des Tooltip oben gesetzt, unten, links oder rechts des Elements:
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>
Versuch es selber " Tipp: Sie können auch die Verwendung data-placement Attribut mit einem Wert von "auto", die der Browser die Position des Tooltips entscheiden lassen. Zum Beispiel, wenn der Wert "auto left" , wird der Tooltip auf der linken Seite angezeigt werden, wenn möglich, sonst auf der rechten Seite .
Füllen Sie Bootstrap Tooltip Referenz
Eine vollständige Referenz aller Tooltip Optionen, Methoden und Ereignisse finden Sie auf unserer Bootstrap JS Tooltip Referenz .