Bootstrap 5 Suggerimento Strumenti

Tooltip

La tooltip è un piccolo riquadro弹出框 che appare quando l'utente muove il puntatore del mouse sopra un elemento:

Come creare una tooltip

Per creare una tooltip, aggiungi data-bs-toggle="tooltip" L'attributo viene aggiunto all'elemento.

Utilizzare title L'attributo specifica il testo visualizzato nella tooltip:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="太棒了！">Fai hover su di me!</button>

Nota:}Le tooltip devono essere inizializzate con JavaScript per funzionare.

Il seguente codice abilita tutte le tooltip nel documento:

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

Prova personalmente

Posizionare la tooltip

Per impostazione predefinita, la tooltip verrà visualizzata all'alto dell'elemento.

Utilizzare data-bs-placement Impostare la posizione della tooltip dell'attributo di proprietà sull'alto, basso, sinistro o destro dell'elemento:

Esempi

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

Prova personalmente