twitter-bootstrap
QuickInfo
Suche…
Bemerkungen
Der Tooltip ist ein Benutzeroberflächenelement, das wie ein kleines Popup-Fenster aussieht. Es wird normalerweise ausgelöst, wenn ein Benutzer seinen Zeiger über ein anderes Element bewegt, ohne darauf zu klicken.
Aus Leistungsgründen müssen Tooltips mit jQuery initialisiert werden. Mit dem folgenden Code werden alle Tooltips im DOM aktiviert:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Tooltips positionieren
Standardmäßig wird die QuickInfo über dem Element angezeigt. Wir können ein data-placement , um die Position des Tooltips oben, unten, links oder rechts vom Element festzulegen.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
Wir können auch data-placement="auto" , um den Tooltip dynamisch neu auszurichten. Der Tooltip wird im nächsten Beispiel nach Möglichkeit links angezeigt, ansonsten rechts.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Basisbeispiel
Um einen Tooltip zu erstellen, müssen wir nur das Attribut data-toggle="tooltip" und einen title zum HTML-Element hinzufügen, das den Tooltip enthält. Das Titelattribut wird verwendet, um den Text anzugeben, der in der QuickInfo angezeigt wird.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
