Hover Card

Overlay

Preview de conteúdo ao pairar sobre um link ou referência, sem exigir clique nem tirar o foco do fluxo atual.

PETR4

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { HoverCard } from "@trdr/ui/hover-card"

Uso

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@trdr/ui/hover-card"

export function Exemplo() {
  return <HoverCard />
}

Props

HoverCardPropsestende React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>
PropTipoDescrição
openDelay?numberAtraso em ms antes de abrir ao passar o mouse no trigger. Default do Radix e 700.
closeDelay?numberAtraso em ms antes de fechar ao tirar o mouse. Default do Radix e 300.
HoverCardTriggerPropsestende React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>
HoverCardContentPropsestende React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>

Quando usar

Use o hover card para dar contexto adicional sobre algo que ja e um link ou referencia na tela, sem forcar o usuario a sair do lugar onde esta: o preview de um ativo ao pairar sobre o ticker, o resumo de um usuario ao pairar sobre o nome dele numa lista de ordens. E informativo e opcional, nunca bloqueia a interacao principal.

Quando nao usar

Nao use hover card em telas majoritariamente touch: nao ha hover em toque, e o componente so abre por foco de teclado como alternativa (o que ajuda desktop com teclado, mas nao resolve mobile). Nesse caso prefira um Popover acionado por clique. Tambem nao use para uma frase curta sobre um controle sem rotulo (isso e o Tooltip), nem para uma acao que precisa ficar aberta ate o usuario decidir algo (isso e o Popover).

Anatomia

  • HoverCard: a raiz, controla openDelay e closeDelay (o Radix ja da uma folga maior que o tooltip por padrao, porque o gesto de pairar sobre um link costuma ser incidental).
  • HoverCardTrigger (data-slot="hover-card-trigger"): renderiza um <a> por baixo, o caso classico sendo um link real. Quando o gatilho nao for de fato um link, componha com asChild sobre um elemento focavel (por exemplo <span tabIndex={0}>).
  • HoverCardContent (data-slot="hover-card-content"): o painel de preview, com seta (data-slot="hover-card-arrow"), dentro de um Portal.

Acessibilidade

Ao contrario do Popover, o Radix nao atribui nenhum role especial ao HoverCardContent: nao existe padrao ARIA proprio para "hover card" nas WAI-ARIA Authoring Practices, entao o componente e um container simples. A acessibilidade vem do trigger, que e um link de verdade (ou um elemento focavel via asChild) e do conteudo interno, que deve usar headings e texto normais.

O card abre tanto por hover quanto por foco de teclado no trigger, e fecha com Escape ou ao sair do hover/foco. Como o trigger e um link, ele ja e navegavel por Tab sem esforco extra.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="hover-card-arrow"][data-slot="hover-card-content"][data-slot="hover-card-trigger"]
7 tokens usados
bg-popoverborder-borderfill-popoveroutline-noneshadow-mdtext-b3text-popover-foreground