Visão geral

O HoverCard exibe um popover com conteúdo rico ao fazer hover em um link ou elemento. Não requer clique.

Demo — passe o mouse no link

← Passe o mouse aqui

Import

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

Quando usar

Use HoverCard para preview contextual que enriquece a experiência sem interromper o fluxo. Para informações simples de uma linha, use Tooltip. Para conteúdo interativo (botões, formulários), use Popover.

Mais exemplos

Outros usos comuns do HoverCard no projeto.

Padrão de implementação

Snippets para uso do HoverCard em diferentes contextos.

HoverCard de perfil

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@usuario</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex items-start gap-4">
      <Avatar>
        <AvatarImage src="/avatar.jpg" alt="Usuário" />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
      <div>
        <p className="font-semibold">Ana Beatriz</p>
        <p className="text-sm text-muted-foreground">
          Desenvolvedora front-end
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Com posicionamento customizado

<HoverCard openDelay={300} closeDelay={100}>
  <HoverCardTrigger asChild>
    <span className="cursor-help underline underline-offset-2">
      Termo técnico
    </span>
  </HoverCardTrigger>
  <HoverCardContent side="top" align="start" className="w-64">
    <p className="text-sm">Definição do termo técnico aqui.</p>
  </HoverCardContent>
</HoverCard>

Props e uso

API dos sub-componentes do HoverCard.

Props principais

openDelay

number

Delay em ms antes de abrir. Padrão: 700ms.

closeDelay

number

Delay em ms antes de fechar. Padrão: 300ms.

HoverCardContent side

"top" | "bottom" | "left" | "right"

Posição do card em relação ao trigger.

HoverCardContent align

"start" | "center" | "end"

Alinhamento do card.

HoverCardTrigger asChild

boolean

Mescla props no elemento filho.

Acessibilidade

O HoverCard não é acessível apenas via hover — garanta que a mesma informação esteja disponível de outra forma para usuários de teclado e mobile.

Use para informações complementares, nunca para informações críticas que só existem no hover.

O componente abre no focus do trigger para suporte parcial a teclado.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter