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

Geben Sie hier die Bildbeschreibung ein

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>

Geben Sie hier die Bildbeschreibung ein



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow