Toggletip
Dica por clique — um botão pequeno que mostra uma explicação curta quando clicado. Use ao lado de um rótulo, de um cabeçalho de tabela ou de uma configuração cujo sentido não é óbvio; funciona com toque, teclado e leitor de tela.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { Toggletip, ToggletipTrigger, ToggletipContent, ToggletipTitle, ToggletipDescription, ToggletipClose } from "@camaleo/react";Anatomia
O gatilho é um botão redondo (toggletip-trigger). A dica é renderizada num portal, dentro de um escopo que mantém o estilo, o modo e a cor da página em volta do botão.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Clique num botão "?" ou chegue nele com Tab e aperte Enter.
Qual usar? O Tooltip dá nome a um controle em poucas palavras, no hover. O HoverCard mostra uma prévia de para onde um link vai, no hover. O Toggletip explica um termo com um clique, então é o que funciona no toque e o que o leitor de tela lê.
Ao lado do rótulo do campo
Coloque o botão depois do rótulo, não dentro dele, para o nome do campo continuar "E-mail de cobrança" e a ajuda ficar a um clique.
| Mês | Churn |
|---|---|
| Agosto de 2026 | 2,4% |
| Setembro de 2026 | 1,9% |
No cabeçalho da tabela
Explique como uma métrica é calculada sem nota de rodapé. O align="end" mantém a dica dentro de uma coluna alinhada à direita.
Numa linha de configuração
Diga o que o switch faz de verdade, com a data ou o valor, antes de a pessoa ligar.
- Taxa de juros
- Custo efetivo total (CET)
Com o nome do assunto
Cada botão diz "Mais sobre …" e o assunto. Na lista de botões do leitor de tela, cinco botões "Info" iguais não dá para distinguir.
Com um link dentro
Abra pelo teclado: o foco vai para a dica e o Tab leva ao link, então dá para chegar nele sem mouse. No máximo um link, para a explicação completa.
Título e botão de fechar
Clique. O título dá nome à dica para o leitor de tela, e o ToggletipClose dá a quem usa toque um jeito claro de fechar. Passe um aria-label traduzido.
Alinhamento
O align alinha a dica com o início, o centro ou o fim do botão. O side escolhe o lado em que ela abre; ela troca de lado quando não há espaço.
Em contexto
O toggletip explica os termos bem onde a pessoa encontra eles. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
| Recurso | Básico | Pro |
|---|---|---|
| Usuários da equipe | 3 | 15 |
| Pix enviados por mês | 300 | Ilimitado |
| Acesso à API | — | Incluso |
Simular empréstimo
Segurança
Boas práticas
Ele abre com clique ou toque, então celular, teclado e leitor de tela recebem o texto.
Ele depende de hover ou foco, então nunca abre no celular, e o leitor de tela pula ele.
O bastante para entender o termo e continuar preenchendo o formulário.
Três parágrafos não cabem numa caixa pequena. Escreva na página, ou leve a um artigo de ajuda.
Props
O Toggletip aceita open, onOpenChange e defaultOpen. O ToggletipTrigger precisa de um aria-label como "Mais sobre a taxa de juros". O ToggletipClose recebe aria-label (padrão "Close tip"; traduza).
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria dica.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O foco entra na dica quando ela abre, então o leitor de tela lê: uma região com o nome do título e a descrição do texto. Não é uma live region, então nada é anunciado enquanto o foco está em outro lugar.
- O botão não tem texto visível. Dê a ele um aria-label com o assunto, como "Mais sobre a taxa de juros". Sem ToggletipTitle, passe aria-label também para o ToggletipContent.
- Um clique ou toque fora fecha a dica, e o resto da página continua usável: não é um diálogo, então o botão informa aria-expanded, mas não aria-haspopup.
- O foco vai para a própria dica, então o leitor de tela lê a explicação antes de qualquer link ou botão de fechar. Use no máximo um link, e mantenha o texto curto.