Componente

Tooltip

Suggerimenti al passaggio del mouse e al focus da tastiera. daisyUI tooltip per il caso rapido, oppure un elemento reale con role=tooltip e aria-describedby quando il testo deve essere annunciato.

Riferimento: <it-tooltip>
Classi: ita-tooltipita-tipita-tip-panelita-tip-bottomita-tip-leftita-tip-rightita-tip-primaryita-tip-secondaryita-tip-successita-tip-warningita-tip-dangerita-tip-info
Basato su (daisyUI): tooltiptooltip-toptooltip-bottomtooltip-lefttooltip-righttooltip-opentooltip-primary
Solo CSS: Niente Floating UI: le quattro posizioni sono quelle di daisyUI, senza flip automatico vicino ai bordi. Il tooltip di daisyUI è uno pseudo-elemento e non entra nell'albero di accessibilità: per un testo che deve essere letto usa la variante con aria-describedby, che compare anche con :focus-visible.
Storybook: Apri le storie di Tooltip

Esempio base

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-6 py-10">
  <span class="tooltip ita-tooltip tooltip-top" data-tip="Testo del tooltip"><button type="button" class="ita-btn ita-btn-primary"><span>Mostra tooltip</span></button></span>
  <span class="tooltip ita-tooltip tooltip-top" data-tip="Testo del tooltip"><button type="button" class="ita-btn ita-btn-primary ita-btn-outline">Su un pulsante outline</button></span>
</div>

Posizionamento

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-6 py-10">
  <span class="tooltip ita-tooltip tooltip-top" data-tip="Tooltip in alto"><button type="button" class="ita-btn ita-btn-primary"><span>Top</span></button></span>
  <span class="tooltip ita-tooltip tooltip-bottom" data-tip="Tooltip in basso"><button type="button" class="ita-btn ita-btn-primary"><span>Bottom</span></button></span>
  <span class="tooltip ita-tooltip tooltip-left" data-tip="Tooltip a sinistra"><button type="button" class="ita-btn ita-btn-primary"><span>Left</span></button></span>
  <span class="tooltip ita-tooltip tooltip-right" data-tip="Tooltip a destra"><button type="button" class="ita-btn ita-btn-primary"><span>Right</span></button></span>
</div>

Sempre visibile

tooltip-open lo tiene aperto, utile per documentare l'aspetto.

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-6 py-16">
  <span class="tooltip ita-tooltip tooltip-top tooltip-open" data-tip="Tooltip sempre visibile"><button type="button" class="ita-btn ita-btn-primary"><span>Mostra tooltip</span></button></span>
  <span class="tooltip ita-tooltip tooltip-top tooltip-primary tooltip-open" data-tip="Colore primario"><button type="button" class="ita-btn ita-btn-primary"><span>Primary</span></button></span>
  <span class="tooltip ita-tooltip tooltip-top tooltip-error tooltip-open" data-tip="Colore danger"><button type="button" class="ita-btn ita-btn-danger"><span>Danger</span></button></span>
</div>

Variante accessibile

role=tooltip più aria-describedby: il testo è nell'albero di accessibilità e compare anche col focus da tastiera (prova con Tab).

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-6 py-16">
  <span class="ita-tip">
  <button aria-describedby="tooltip-1" type="button" class="ita-btn ita-btn-primary"><span>Mostra tooltip</span></button>
  <span role="tooltip" id="tooltip-1" class="ita-tip-panel">Testo del tooltip annunciato dallo screen reader<span aria-hidden="true"></span></span>
</span>
  <span class="ita-tip">
  <button aria-describedby="tooltip-2" type="button" class="ita-btn ita-btn-primary ita-btn-outline ita-btn-circle" aria-label="Informazioni"><svg class="size-5 shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg></button>
  <span role="tooltip" id="tooltip-2" class="ita-tip-panel ita-tip-bottom ita-tip-primary">Anche in basso<span aria-hidden="true"></span></span>
</span>
</div>

Su link e testo

Mostra il codice HTML

<div class="flex flex-wrap items-center justify-center gap-6 py-10">
  <span class="tooltip ita-tooltip tooltip-top" data-tip="Testo del tooltip"><a href="#" class="ita-link font-semibold">Un link con tooltip</a></span>
  <span class="ita-tip">
  <button aria-describedby="tooltip-3" type="button" class="ita-link font-semibold">Acronimo</button>
  <span role="tooltip" id="tooltip-3" class="ita-tip-panel">Spiegazione dell'acronimo<span aria-hidden="true"></span></span>
</span>
</div>