Capítulo 50 de 108

Hover Card

Core Idea

Permite a usuários videntes pré-visualizar conteúdo por trás de um link, ativado por hover (não clique). Built on Base UI Hover Card.

Key Concepts

  • delay / closeDelay: props em HoverCardTrigger, controlam ms de espera para abrir e fechar respectivamente (ex. delay={10} closeDelay={100} para abertura quase instantânea e fechamento com pequena folga).
  • side / align: em HoverCardContent, mesma API de posicionamento de Popover/Tooltip (left/top/bottom/right ou inline-start/inline-end).

Code Examples

<HoverCard>
  <HoverCardTrigger delay={10} closeDelay={100} render={<Button variant="link" />}>
    Hover Here
  </HoverCardTrigger>
  <HoverCardContent className="flex w-64 flex-col gap-0.5">
    <div className="font-semibold">@nextjs</div>
    <div>The React Framework – created and maintained by @vercel.</div>
    <div className="mt-1 text-xs text-muted-foreground">Joined December 2021</div>
  </HoverCardContent>
</HoverCard>
  • O que demonstra: preview de perfil estilo Twitter/X, delay/closeDelay curtos para resposta rápida sem piscar.

Reference Tables

Composição:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Key Takeaways

  1. delay/closeDelay são as props centrais deste componente e diferenciam sua UX do Tooltip (ativação mais deliberada, menos imediata).
  2. side/align seguem o mesmo padrão de Popover/Tooltip, incluindo valores lógicos RTL-aware.
  3. Instalação manual requer npm install @base-ui/react.
  4. Ideal para previews de perfil/link (usuário, produto), não para texto curto de ajuda (isso é Tooltip).

Connects To

  • Tooltip: mesma mecânica de hover, mas para texto curto e não interativo; Hover Card é para conteúdo rico (avatar, descrição, metadados).
  • Popover: para conteúdo ativado por clique em vez de hover.
  • Avatar: comum aparecer dentro do HoverCardContent em previews de perfil de usuário.
AnteriorTooltipPróximoContext Menu