componentes / tooltip

Tooltip

Descripción corta al pasar el mouse y al enfocar con teclado, con retraso, flecha y role="tooltip".

Cómo usar

El hijo recibe `aria-describedby` mientras el tooltip está abierto. Abre tras `delayDuration` al pasar el mouse (al instante con foco) y cierra al salir, perder el foco o con Esc. No es interactivo y mide hasta 240px, así que no pongas enlaces o botones dentro ni dependas de él para información esencial (las pantallas táctiles no tienen hover).

preview

Tooltip.tsx

import { Button, Tooltip } from "vaiperui";
 
<Tooltip content="Guarda tus cambios" title="Atajo">
  <Button>Guardar</Button>
</Tooltip>

Lados

preview

top

right

bottom

left

lados.tsx

<Tooltip side="top" content="top"><Button>top</Button></Tooltip>
<Tooltip side="right" content="right"><Button>right</Button></Tooltip>
<Tooltip side="bottom" content="bottom"><Button>bottom</Button></Tooltip>
<Tooltip side="left" content="left"><Button>left</Button></Tooltip>

Colores

preview

neutral

primary

success

warning

danger

colores.tsx

<Tooltip variantColor="neutral" content="neutral"><Button>neutral</Button></Tooltip>
<Tooltip variantColor="primary" content="primary"><Button>primary</Button></Tooltip>
<Tooltip variantColor="success" content="success"><Button>success</Button></Tooltip>
<Tooltip variantColor="warning" content="warning"><Button>warning</Button></Tooltip>
<Tooltip variantColor="danger" content="danger"><Button>danger</Button></Tooltip>

Props

Prop	Valores	Predeterminado	Descripción
children	ReactElement	obligatorio	El elemento descrito (necesita ref y foco)
content / title	ReactNode	ninguno	Texto y encabezado destacado opcional
side	top \| right \| bottom \| left	top	Lado del disparador; se invierte si no hay espacio
showArrow / delayDuration	boolean / number	true / 200	Flecha y retraso del hover en ms
open / defaultOpen / onOpenChange	boolean / boolean / (open) => void	ninguno	Estado abierto controlado o no controlado
variantColor / customColor / radius	neutral \| primary \| success \| warning \| danger / CSS color / none \| sm \| md \| lg \| full	neutral / md	Color de fondo y redondeo

Accesibilidad

El globo tiene `role="tooltip"` y el hijo recibe `aria-describedby` apuntando a él solo mientras está abierto.
Abre al pasar el mouse tras `delayDuration` (por defecto 200ms) e inmediatamente al recibir foco del teclado.
Cierra al salir el mouse, al perder el foco o con Esc; el Esc se escucha en el document solo mientras está abierto.
La flecha es `aria-hidden`, y el globo tiene `pointer-events-none`, así que nunca es objetivo.

Teclado

Tecla	Acción
Tab (focus)	Enfocar el hijo muestra el tooltip; perder el foco lo oculta
Esc	Cierra el tooltip

Ten en cuenta

El hijo debe ser enfocable (botón, enlace, input) para que usuarios de teclado y lector de pantalla alcancen el tooltip.
Mantenlo corto y no interactivo, y nunca pongas información esencial en él: las pantallas táctiles no tienen hover, y el globo no recibe hover ni clic.