HoverCard

Card que aparece al hacer hover sobre un elemento. Más pesada que Tooltip, ideal para mostrar info enriquecida.

---

Import

import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from '@imansi/ui';

---

Uso básico

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@usuario</Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="flex gap-4">
      <Avatar>
        <AvatarImage src="/user.png" />
        <AvatarFallback>U</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">Juan Pérez</h4>
        <p className="text-sm text-muted-foreground">
          Desarrollador full stack. Construyendo cosas en internet.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

---

Con delay

<HoverCard openDelay={200} closeDelay={100}>
  {/* ... */}
</HoverCard>

---

Props

HoverCard

Prop	Tipo	Default	Descripción
openDelay	number	700	Delay antes de abrir (ms)
closeDelay	number	300	Delay antes de cerrar (ms)

HoverCardContent

Prop	Tipo	Default	Descripción
align	'start' | 'center' | 'end'	'center'	Alineación
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Lado
sideOffset	number	4	Separación

---

Diferencia con Tooltip

Característica	HoverCard	Tooltip
Contenido	Rico (imágenes, links, layout)	Solo texto corto
Interactivo	Sí (se puede clickear dentro)	No
Delay default	700ms	700ms
Uso típico	Perfil de usuario	Aclaración corta