HoverCard
Cartão flutuante com uma prévia do destino de um link, que aparece quando a pessoa passa o mouse ou dá foco nele. Use para perfis e prévias de página, e deixe tudo o que ele mostra também na página que o link abre.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardArrow } from "@camaleo/react";Anatomia
O gatilho é um link (hover-card-trigger, um <a>). O card é renderizado num portal, dentro de um escopo que mantém o estilo, o modo e a cor da página em volta do link.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Passe o mouse num link ou chegue nele com Tab: o card também abre no foco.
Qual usar? O Tooltip dá nome a um controle em poucas palavras. O HoverCard mostra uma prévia de para onde o link vai, como um extra para quem usa mouse e teclado. O Toggletip explica um termo com um clique, então é o que funciona no toque e o que o leitor de tela lê.
Aprovado por @marina.costa
Autor de um artigo
Quem lê vê quem escreveu sem sair da página. Clicar no nome continua abrindo o perfil, que é o único caminho no celular.
Antes de enviar, confira as tarifas do Pix para conta PJ.
Prévia de link
Mostre o título e um resumo de uma linha da página, para a pessoa saber se vale o clique. O texto do link já diz para onde ele vai.
Dúvidas sobre o contrato vão para a Joana Ribeiro, sua gerente de conta.
Só um extra
O leitor de tela não lê o card, e a tela de toque nunca abre ele. Coloque a informação principal no texto do link ("sua gerente de conta"), não só no card.
Espera maior numa lista
Numa lista de nomes, delay={1000} evita que os cards pisquem quando o mouse só atravessa a lista. O padrão é 600 ms para abrir e 300 ms para fechar.
Carregar ao abrir
Passe o mouse. Busque os detalhes no onOpenChange, não para cada link da página, e mostre um Skeleton com aria-busy enquanto carregam.
Alinhamento
O align alinha o card com o início, o centro ou o fim do link. O side escolhe o lado em que ele abre; ele troca de lado quando não há espaço.
Sua última compra foi o pedido nº 48213.
Com seta
Use o HoverCardArrow quando houver vários links próximos, para ficar claro a qual deles o card pertence.
Em contexto
O hover card dá uma espiada rápida em links que a pessoa já tem. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Comentários (2)
- Marina Costa · 27/10/2026
O novo comprovante fica bom no celular. Dá para deixar o valor na primeira linha?
- Rafael Lima · 28/10/2026
Feito na última versão, e o PDF agora está igual.
| Tarefa | Responsável | Situação |
|---|---|---|
| Login por biometria no Android | Ana Souza | Em revisão |
| Relatório de chargeback | Bruno Alves | Concluída |
| Nova etapa de envio do RG | Carla Mendes | Bloqueada |
Pix durante a noite
Entre 20h e 6h, as transferências seguem o seu limite noturno a não ser que a pessoa esteja nos seus contatos de confiança.
Boas práticas
A página do perfil tem tudo o que o card mostra, então um clique, um toque ou o Enter levam a pessoa até lá.
Sem href ele não recebe foco nem toque, então quem usa teclado ou celular nunca vê o card.
Três ou quatro informações que a pessoa entende de relance e segue em frente.
Ele fecha quando o mouse escapa, e quem usa teclado não chega até eles. Coloque as ações na página do perfil, ou use um popover.
Props
O HoverCardTrigger recebe delay (ms antes de abrir, padrão 600), closeDelay (ms antes de fechar, padrão 300) e render para usar um Link. O HoverCard aceita open, onOpenChange e defaultOpen.
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 card.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Só deste componente
Acessibilidade
- O leitor de tela não ouve o card: o popup não tem role e nada liga ele ao gatilho. O texto do link e a página que ele abre precisam ter tudo.
- Tela de toque não tem hover: um toque abre o link e o card nunca aparece.
- O card nunca entra na ordem de tabulação, então quem usa teclado não alcança nada dentro dele. Nunca coloque links ou botões nele.
- Dá para levar o mouse do link até o card sem ele fechar, como pede o WCAG 1.4.13.