Tooltip
Dica curta que aparece ao passar o mouse ou focar um elemento pelo teclado, ideal para nomear botões só com ícone.
'use client';
import { Printer } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
export default function TooltipDemo() {
return (
<TooltipTrigger>
<Button variant="outline" size="icon" aria-label="Imprimir receita">
<Printer />
</Button>
<Tooltip>Imprimir receita</Tooltip>
</TooltipTrigger>
);
}Instalação
npx shadcn@latest add @lenstech/tooltipUso
import { Button } from "@/components/ui/button"
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"<TooltipTrigger>
<Button size="icon" aria-label="Imprimir">
<Printer />
</Button>
<Tooltip>Imprimir</Tooltip>
</TooltipTrigger>O tooltip abre depois de delay (500 ms) no hover e imediatamente no foco por teclado. Depois que um tooltip foi
exibido, os vizinhos abrem sem atraso enquanto o mouse percorre a barra.
Exemplos
Posicionamento
'use client';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
const placements = [
{ placement: 'top', label: 'Acima' },
{ placement: 'bottom', label: 'Abaixo' },
{ placement: 'left', label: 'Esquerda' },
{ placement: 'right', label: 'Direita' },
] as const;
export default function TooltipPlacements() {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
{placements.map(({ placement, label }) => (
<TooltipTrigger key={placement}>
<Button variant="outline">{label}</Button>
<Tooltip placement={placement}>Dica posicionada: {label.toLowerCase()}</Tooltip>
</TooltipTrigger>
))}
</div>
);
}Barra de ferramentas
O uso mais comum: nomear botões que só têm ícone. Mantenha o aria-label no botão — o tooltip é um complemento visual.
'use client';
import { Copy, Download, Pencil, Share2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
const acoes = [
{ icon: Pencil, label: 'Editar orçamento' },
{ icon: Copy, label: 'Duplicar' },
{ icon: Download, label: 'Baixar PDF' },
{ icon: Share2, label: 'Enviar por WhatsApp' },
];
export default function TooltipToolbar() {
return (
<div role="toolbar" aria-label="Ações do orçamento" className="flex gap-1 rounded-lg border p-1">
{acoes.map(({ icon: Icon, label }) => (
// delay menor: depois da primeira dica, as vizinhas abrem instantaneamente
<TooltipTrigger key={label} delay={300}>
<Button variant="ghost" size="icon" aria-label={label}>
<Icon />
</Button>
<Tooltip>{label}</Tooltip>
</TooltipTrigger>
))}
</div>
);
}Sem seta e sem atraso
showArrow={false} remove a seta; delay={0} abre o tooltip assim que o mouse passa por cima.
CNAE principal
'use client';
import { CircleHelp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
export default function TooltipNoArrow() {
return (
<div className="flex items-center gap-1 text-sm">
<span>CNAE principal</span>
<TooltipTrigger delay={0}>
<Button variant="ghost" size="icon-sm" aria-label="O que é CNAE?">
<CircleHelp />
</Button>
<Tooltip showArrow={false} placement="right">
Código que identifica a atividade econômica da empresa na Receita Federal.
</Tooltip>
</TooltipTrigger>
</div>
);
}Quando usar
- Use para nomear botões com ícone ou explicar um termo em poucas palavras.
- Não use para informação essencial: em telas de toque o tooltip não aparece.
- Não use para conteúdo interativo (links, botões, campos) — use
Popover. - Tooltips não aparecem em botões desabilitados; se precisar explicar por que algo está desabilitado, mostre o texto na tela.
API
TooltipTrigger
Aceita todas as props do TooltipTrigger do React Aria, com padrões diferentes:
Prop
Type
Tooltip
Aceita todas as props do Tooltip do React Aria, mais:
Prop
Type