Tooltip
Rótulo curto no hover ou foco de um elemento.
Playground
Lado
<Tooltip>
<TooltipTrigger render={<Button variant="outline" size="icon" aria-label="Apagar fonte" />}>
<Trash />
</TooltipTrigger>
<TooltipContent>Apagar fonte</TooltipContent>
</Tooltip>Quando usar
- ✓Nome de um botão só com ícone
- ✓Atalho de teclado de uma ação
Evite quando
- Explicar como algo funciona→ texto visível na tela — princípio: se precisa de tooltip, não está pronto
- Conteúdo interativo→ Popover
- Toque no celular→ rótulo visível — tooltip não existe em touch
Estados
open (delay)closed
Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).
Acessibilidade
- Papel
- tooltip
- Teclado
- aparece no foco; Esc fecha
- Não substitui aria-label
Código
Partes: TooltipProvider, Tooltip, TooltipTrigger, TooltipContent
import
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";Fonte: src/components/ui/tooltip.tsx · Resense (shadcn base-nova, Base UI)
Relacionados: Popover