Tooltip

Visualizza suggerimenti o informazioni in prossimità di altri elementi.

Alcune cose da sapere quanto usi il plugin tooltip:

• I tooltip si basano sulla libreria di terze parti Popper.js. Per fare in modo che i tooltip funzionino è quindi necessario usare la versione bundle che contiene già Popper.js o includere popper.min.js nel codice
• I tooltip sono opt-in per ragioni di performance, quindi devi inizializzarli tu stesso con codice javascript, ad esempio:
  
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
  })
  
  
• I tooltip con titoli vuoti non saranno mai visualizzati.
• Specifica container: 'body' per evitare problemi di rendering in componenti più complessi (come nei gruppi di input, gruppi di bottoni, etc).
• Attivare i tooltip su elementi nascosti non funzionerà.
• I tooltip per gli elementi .disabled o disabled devono essere attivati da un elemento contenitore.
• Quando attivati da collegamenti ipertestuali che si estendono su più righe, i tooltip verranno centrati. Usa white-space: nowrap;sui tuoi <a> per evitare questo comportamento.
• I tooltip devono essere nascosti prima che i loro elementi corrispondenti siano stati rimossi dal DOM.
• Puoi specificare con l'attributo data-bs-placement la posizione del tooltip rispetto al testo.

Esempio

<div class="col-12 p-5">
  <p>
    Ecco un <a href="#" data-bs-toggle="tooltip" title="Primo tooltip">bianco scenario</a><br/>
    per tratteggiarvi l’accompagnamento degli oggetti di sfondo che pur vivono.  Non ne sarò <a href="#" data-bs-toggle="tooltip" title="Secondo tooltip">l’artefice</a> impaziente.<br/>
    La mia lentezza? No, la mia fiducia.  Per adesso è deserto.<br/>
    <a href="#" data-bs-toggle="tooltip" title="Terzo tooltip">Il mondo può rifarsi senza me</a>,<br/>
    E intanto gli altri mi denigreranno
  </p>
  <p>
  Passa il mouse sopra i bottoni sottostanti per vedere le quattro direzioni dei tooltip: sopra, destra, sotto, e sinistra.
  </p>
<div class="row"><div class="col-12 text-center">
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip a sinistra" >Tooltip a sinistra</button><br/><br/>
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip a destra" >Tooltip a destra</button><br/> 
</div>
<div class="col-6">
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip sopra" >Tooltip sopra</button><br/><br/>
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip sotto" >Tooltip sotto</button><br/>  
</div></div>
</div>

Accessibilità