Hover Card

Visão geral

HoverCard mostra um preview rico quando o usuário passa o cursor sobre uma âncora (link, nome, abreviação). Use-o para conteúdo que o usuário pode abrir por completo com um clique mas que talvez queira apenas espiar antes: cards de perfil de usuário em @mentions, previews de link, teasers de documento ou imagem.

Nunca coloque informação crítica ou controles interativos dentro de um HoverCard. O hover é não confiável (usuários de touch não o têm; usuários de teclado só veem o card enquanto o foco se mantém) e o preview deveria ser não essencial. Conteúdo interativo pertence a um Popover; rótulos de texto simples pertencem a um Tooltip.

Preview

'use client';import { Button } from '@gremorie/rx-forms';import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from '@gremorie/rx-overlays';export function HoverCardPreview() {  return (    <HoverCard>      <HoverCardTrigger asChild>        <Button variant="link">@gremorie</Button>      </HoverCardTrigger>      <HoverCardContent>        <div className="text-sm">          <strong>Gremorie</strong>          <p className="mt-1 text-muted-foreground">            AI-native design system. Registry + MCP first.          </p>        </div>      </HoverCardContent>    </HoverCard>  );}

Anatomia

HoverCard                  raiz Radix que gerencia o timing de abrir/fechar no hover
├─ HoverCardTrigger        elemento que revela o card no hover/focus
└─ HoverCardContent        superfície de preview em portal (align, sideOffset)

Instalação

Uso

import { Button } from "@gremorie/rx-forms";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@gremorie/rx-overlays";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@gremorie</Button>
      </HoverCardTrigger>
      <HoverCardContent>
        <div className="text-sm">
          <strong>Gremorie</strong>
          <p className="mt-1 text-muted-foreground">
            AI-native design system. Registry + MCP first.
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

API

<HoverCard>

Estende o Radix HoverCard.Root. Props notáveis:

<HoverCardTrigger>

Estende o Radix HoverCard.Trigger. Emparelhe com asChild para encaminhar estilos a um link, botão ou qualquer âncora inline.

<HoverCardContent>

A superfície padrão é w-64, com padding p-4. Envolvida em um Portal do Radix. Todas as demais props do Radix HoverCard.Content são encaminhadas.

Composição

1. <HoverCard> detém o estado de hover. Ajuste o timing com openDelay / closeDelay.
2. <HoverCardTrigger asChild> envolve o elemento âncora (tipicamente um link inline ou um nome).
3. <HoverCardContent> monta via Portal, ancorado ao trigger, com fade e zoom in.
4. Dentro do content: qualquer preview não interativo - avatar + bio, teaser de imagem, snippet de doc.

Variações

Preview de perfil de usuário

O clássico hover card de @mention. Acionado ao passar o cursor sobre um link para o perfil do usuário.

<HoverCard>
  <HoverCardTrigger asChild>
    <a href="/users/kalvner" className="font-medium underline">
      @kalvner
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="flex gap-3">
      <Avatar>
        <AvatarImage src="/avatars/kalvner.png" />
        <AvatarFallback>BK</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Bruno Kalvner</h4>
        <p className="text-xs text-muted-foreground">
          Designer and engineer. Maintains Gremorie.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

Preview de link

Mostre metadados de um link externo antes de o usuário clicar.

<HoverCard openDelay={400}>
  <HoverCardTrigger asChild>
    <a href="https://gremorie.com" className="underline">
      gremorie.com
    </a>
  </HoverCardTrigger>
  <HoverCardContent>
    <h4 className="text-sm font-semibold">Gremorie</h4>
    <p className="text-xs text-muted-foreground">
      Registry-driven, MCP-first design system for React and Angular.
    </p>
  </HoverCardContent>
</HoverCard>

Teaser rápido de imagem

Use para espiar media antes de comprometer-se com um visualizador em tela cheia.

<HoverCard openDelay={200} closeDelay={100}>
  <HoverCardTrigger asChild>
    <button>Preview thumbnail</button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80 p-2">
    <img src="/teaser.jpg" alt="Teaser" className="rounded-md" />
  </HoverCardContent>
</HoverCard>

Acessibilidade

• Trigger: hover do ponteiro e foco do teclado ambos abrem o card.
• Teclado: dar foco ao trigger o abre; tirar o foco o fecha; Esc fecha quando o foco está dentro.
• Não para conteúdo crítico: usuários de touch podem nunca ver o card. Mantenha o conteúdo suplementar.
• aria-controls é ligado automaticamente entre trigger e content.
• Sem focus trap: o ponteiro pode sair naturalmente; ao fechar nada é retornado, porque o trigger nunca perdeu o foco por padrão.
• Reduced motion: as animações de abrir/fechar respeitam prefers-reduced-motion.

Relacionados

• Popover - overlay interativo dirigido por clique.
• Tooltip - rótulo de texto apenas em hover para ícones e shortcuts.
• Dialog - modal centralizado para fluxos de foco total.