Bootstrap 5-Tooltip

Tooltipp

Ein Tooltipp ist ein kleines Pop-up-Fenster, das erscheint, wenn der Benutzer den Mauszeiger auf das Element bewegt:

Wie erstellt man einen Tooltipp

Um einen Tooltipp zu erstellen, fügen Sie data-bs-toggle="tooltip" Eigenschaft wird dem Element hinzugefügt.

Verwenden Sie title Eigenschaft, die angibt, welchen Text im Tooltipp angezeigt wird:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了！">Bewegen Sie den Mauszeiger darauf!</button>

Anmerkung:ToolTips müssen mit JavaScript initialisiert werden, um zu funktionieren.

Das folgende Code aktiviert alle Tooltips im Dokument:

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipTriggerList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
)
</script>

Versuchen Sie es selbst

Positionierung der Tooltips

Standardmäßig wird das Tooltip in der oberen Position des Elements angezeigt.

Verwenden Sie data-bs-placement Position der Tooltips einstellen: Top, Bottom, Left oder Right des Elements:

Beispiel

<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Großartig!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Großartig!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Großartig!">Hover</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Großartig!">Hover</a>

Versuchen Sie es selbst