Tooltip

Un Tooltip di Radix — una breve etichetta mostrata al passaggio del mouse/focus. Necessita di un TooltipProvider montato una volta vicino alla radice della tua app (controlla il ritardo condiviso di apertura/chiusura).

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@pompeitech/vesuvius-ui";

Default

Posizionamento

side/align di TooltipContent controllano dove viene renderizzato rispetto al trigger — si capovolge anche automaticamente per restare visibile vicino al bordo di un viewport, stessa gestione delle collisioni di Popover:

Su un pulsante a icona

L'uso reale più comune — etichettare un pulsante solo-icona che non ha testo visibile proprio:

Ritardo di apertura personalizzato

delayDuration di TooltipProvider (ms) si applica a ogni Tooltip sottostante — accorcialo per una sensazione più reattiva, o impostalo a 0 per mostrarlo istantaneamente:

<TooltipProvider delayDuration={100}>
  {/* ogni Tooltip qui dentro si apre dopo 100ms di hover, invece dei 700ms di default */}
</TooltipProvider>

API

TooltipProvider

Montalo una sola volta, vicino alla radice dell'app — coordina la temporizzazione di ogni tooltip nella pagina, non solo dei propri figli.

Tooltip

TooltipTrigger — ogni prop nativa di <button>, più asChild (boolean, default false) per collegare il tooltip al tuo elemento invece di avvolgerlo in uno extra.

TooltipContent

Più ogni prop nativa di <div>; renderizzato in un Portal.

Accessibilità

Si mostra al passaggio del mouse e al focus da tastiera (non solo hover), e si chiude con Esc — quindi è raggiungibile senza mouse. Non è un sostituto per un vero nome accessibile — il contenuto realmente necessario per capire un controllo (non solo un suggerimento carino da avere) appartiene ad aria-label, dato che il contenuto del tooltip non viene annunciato in modo affidabile da ogni screen reader in ogni modalità.