componentes / tooltip

Tooltip

Descrição curta ao passar o mouse e ao focar pelo teclado, com atraso, seta e role="tooltip".

Como usar

O filho recebe `aria-describedby` enquanto o tooltip está aberto. Abre após `delayDuration` no hover (na hora no foco) e fecha ao sair, perder o foco ou com Esc. Não é interativo e tem até 240px de largura, então não ponha links ou botões dentro nem dependa dele para informação essencial (telas de toque não têm hover).

preview

Tooltip.tsx

import { Button, Tooltip } from "vaiperui";
 
<Tooltip content="Salve suas alterações" title="Atalho">
  <Button>Salvar</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>

Cores

preview

neutral

primary

success

warning

danger

cores.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	Padrão	Descrição
children	ReactElement	obrigatório	O elemento descrito (precisa de ref e foco)
content / title	ReactNode	nenhum	Texto e título destacado opcional
side	top \| right \| bottom \| left	top	Lado do gatilho; inverte se não houver espaço
showArrow / delayDuration	boolean / number	true / 200	Seta e atraso do hover em ms
open / defaultOpen / onOpenChange	boolean / boolean / (open) => void	nenhum	Estado aberto controlado ou não controlado
variantColor / customColor / radius	neutral \| primary \| success \| warning \| danger / CSS color / none \| sm \| md \| lg \| full	neutral / md	Cor de fundo e arredondamento

Acessibilidade

O balão tem `role="tooltip"` e o filho recebe `aria-describedby` apontando para ele apenas enquanto aberto.
Abre no hover após `delayDuration` (padrão 200ms) e imediatamente ao receber foco do teclado.
Fecha ao sair o mouse, ao perder o foco ou com Esc; o Esc é escutado no document apenas enquanto aberto.
A seta é `aria-hidden`, e o balão tem `pointer-events-none`, então nunca é alvo.

Teclado

Tecla	Ação
Tab (focus)	Focar o filho mostra o tooltip; perder o foco o oculta
Esc	Fecha o tooltip

Tenha em mente

O filho precisa ser focável (botão, link, input) para que usuários de teclado e leitor de tela alcancem o tooltip.
Mantenha-o curto e não interativo, e nunca ponha informação essencial nele: telas de toque não têm hover, e o balão não pode receber hover nem clique.