Tooltip

Il testo del tooltip vive in un attributo data ed è disegnato da uno pseudo-elemento, quindi non c’è alcuno script, niente da posizionare a runtime e niente che resti nel DOM. Compare al passaggio del mouse e al focus da tastiera, di cui si occupa la metà :focus-within della regola.

Tooltip di base

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Copia negli appunti' },
    iconButton({
      label: 'Copia',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Ricostruisci il sito' },
    button({ variant: 'outline', color: 'neutral' }, 'Ricostruisci'),
  ),
)

Posizionamento

Sopra per impostazione predefinita, sotto quando sopra non c’è spazio.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Sopra l’elemento' },
    button({ variant: 'soft', color: 'neutral' }, 'Sopra'),
  ),
  tooltip({ content: 'Sotto l’elemento', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Sotto'),
  ),
)

Nomi accessibili

Il testo del tooltip è decorazione — viene disegnato dalla proprietà CSS content, che gli screen reader non annunciano in modo affidabile. Il controllo al suo interno ha comunque bisogno di un proprio nome accessibile, che è quello che fornisce la label di iconButton(). Quando il tooltip dice qualcosa che il nome del controllo non dice, passa label: true per ripeterlo in uno span nascosto visivamente.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Pubblica subito in produzione', label: true },
    button({ color: 'danger' }, 'Pubblica'),
  ),
)

Sul testo

Un tooltip avvolge il contenuto inline con la stessa facilità con cui avvolge un pulsante.

text(
  'La build scrive in ',
  tooltip({ content: 'Configurabile con outDir' }, code('dist/')),
  ' e in nient’altro.',
)

Quando non usarne uno

I tooltip non compaiono al tocco, e spariscono nel momento in cui il puntatore se ne va. Tutto ciò che chi legge deve assolutamente avere — un messaggio di errore, la spiegazione di un campo obbligatorio — va nel testo di help del campo stesso, non in un tooltip.

Props