Vox Mente
Navegação

Componentes

Hover Card

beta

Prévia de um registro ao passar o mouse. Depende de hover, então nunca substitui o caminho clicável.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/hover-card

Playground
Marina Alves
<HoverCard>
  <HoverCardTrigger>Marina Alves</HoverCardTrigger>
  <HoverCardContent>
    <p>7º ano B · trilha de leitura · 12 sessões concluídas</p>
  </HoverCardContent>
</HoverCard>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
HoverCard
  └─ HoverCardTrigger
  └─ HoverCardContent

Uso

Prévia de conteúdo ao passar o mouse — sem clicar, sem sair da tela.
Marina Alves

Lado e alinhamento

`side` e `align` controlam onde o cartão abre. Em tabelas com pouca margem lateral, `side="right"` evita cortar o conteúdo.
Turma 9º ano A

Distância do gatilho

`sideOffset` e `alignOffset` afastam o cartão do texto. Útil quando o gatilho fica colado a outro elemento interativo.
Sessão de 28 de agosto

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

HoverCard, HoverCardContent, HoverCardTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css