Tooltip
Dica (tooltip) — um rótulo curto que aparece quando a pessoa passa o mouse ou dá foco num controle. Use para dar nome a botões de ícone e mostrar atalhos, nunca para informação que a pessoa precisa.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@camaleo/react";Anatomia
Um gatilho e um popup com seta. O popup é renderizado num portal, então um elemento pai com overflow: hidden não corta ele.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. O leitor de tela não lê o tooltip, então num botão de ícone o aria-label precisa dizer exatamente o que o tooltip diz.
Mesmo texto do rótulo
O tooltip mostra, para quem enxerga, o nome que o leitor de tela fala. Escreva uma vez e use no aria-label e no tooltip.
Com atalho
Coloque um Kbd para ensinar o atalho e aria-keyshortcuts no gatilho, para quem usa leitor de tela aprender também.
Lados
Aponte o tooltip para onde a ação vai: para cima em "Mover para cima", para a direita em "Próxima". Se não couber, ele vira para o outro lado.
Espera compartilhada na barra
Passe o mouse num botão e deslize para o próximo. Um TooltipProvider em volta do grupo só espera no primeiro tooltip; os outros abrem na hora.
Copiar e confirmar
Clique. O tooltip muda para "Copiado" para quem vê, e uma mensagem de status escondida diz "Link copiado" para o leitor de tela.
Em botão desativado
Botão desativado não recebe hover nem foco, então o tooltip nunca abre. Use focusableWhenDisabled e ligue o motivo com aria-describedby.
Nome cortado por inteiro
Mostre o nome completo do arquivo quando ele não couber. Deixe o nome inteiro no texto do link, para o leitor de tela ler tudo.
Em contexto
O tooltip dá nome aos botões que só têm ícone. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Notas da versão
export const config = {
theme: "auto",
brand: "#3fa34d"
};Boas práticas
"Salvar alterações" se lê de relance e é exatamente o que o leitor de tela fala.
Ele fecha assim que o mouse sai, e quem usa teclado não consegue chegar lá. Use um popover.
A pessoa aprende na hora em que usa a ação, sem abrir a ajuda.
No celular não existe hover, e o leitor de tela não lê o tooltip. Coloque as regras da senha na descrição do campo.
Props
O TooltipProvider recebe delay (ms antes de abrir o primeiro tooltip, padrão 600) e closeDelay (ms antes de fechar). O TooltipTrigger aceita os mesmos dois para um tooltip só, e o Tooltip aceita disabled, open e onOpenChange.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio popup.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O leitor de tela não lê o tooltip: nada liga ele ao gatilho. Num botão de ícone, o aria-label precisa ser o texto do tooltip, palavra por palavra.
- O que a pessoa precisa saber vai na página, não só no tooltip. Tela de toque não tem hover, então lá o tooltip nunca abre.
- Botão desativado não recebe hover nem foco. Deixe ele focável com focusableWhenDisabled, ou escreva o motivo ao lado do botão.
- Dá para levar o mouse até o tooltip sem ele fechar, como pede o WCAG 1.4.13.