Hover Card

Vista previa enriquecida que se abre al pasar el cursor o enfocar un enlace o disparador. Retrasos, lados y alineación.

1'use client';
2
3import { Calendar03Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { HoverCard } from '@/components/ui/hover-card';
8
9export function Default() {
10  return (
11    <HoverCard>
12      <HoverCard.Trigger asChild>
13        <Button variant="link">@figueroaignacio</Button>
14      </HoverCard.Trigger>
15      <HoverCard.Content className="w-72">
16        <div className="flex gap-3">
17          <Avatar>
18            <Avatar.Image src="https://github.com/figueroaignacio.png" alt="Ignacio Figueroa" />
19            <Avatar.Fallback>IF</Avatar.Fallback>
20          </Avatar>
21          <div className="flex flex-col gap-1">
22            <p className="text-sm font-semibold">@figueroaignacio</p>
23            <p className="text-muted-foreground text-xs">
24              Building NachUI, a copy-paste component library with zero dependencies.
25            </p>
26            <p className="text-muted-foreground flex items-center gap-1.5 pt-1 text-xs">
27              <HugeiconsIcon icon={Calendar03Icon} size={14} />
28              Joined March 2024
29            </p>
30          </div>
31        </div>
32      </HoverCard.Content>
33    </HoverCard>
34  );
35}

Instalación

pnpm dlx nachui add hover-card

Anatomía

1import { HoverCard } from '@/components/ui/hover-card';

1<HoverCard>
2  <HoverCard.Trigger asChild>
3    <a href="/u/nacho">@nacho</a>
4  </HoverCard.Trigger>
5  <HoverCard.Content>Vista previa del perfil</HoverCard.Content>
6</HoverCard>

La tarjeta se abre después de openDelay cuando el puntero entra al disparador y se cierra después de closeDelay cuando sale, salvo que se haya movido sobre la tarjeta. El foco de teclado la abre de inmediato y el blur la cierra. Escape también la cierra. Los punteros táctiles nunca la abren, así que en teléfonos el disparador conserva su comportamiento.

Composición

HoverCard
├── HoverCard.Trigger
└── HoverCard.Content

Variantes

Predeterminado (Default)

Una tarjeta de perfil sobre una mención.

1'use client';
2
3import { Calendar03Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { HoverCard } from '@/components/ui/hover-card';
8
9export function Default() {
10  return (
11    <HoverCard>
12      <HoverCard.Trigger asChild>
13        <Button variant="link">@figueroaignacio</Button>
14      </HoverCard.Trigger>
15      <HoverCard.Content className="w-72">
16        <div className="flex gap-3">
17          <Avatar>
18            <Avatar.Image src="https://github.com/figueroaignacio.png" alt="Ignacio Figueroa" />
19            <Avatar.Fallback>IF</Avatar.Fallback>
20          </Avatar>
21          <div className="flex flex-col gap-1">
22            <p className="text-sm font-semibold">@figueroaignacio</p>
23            <p className="text-muted-foreground text-xs">
24              Building NachUI, a copy-paste component library with zero dependencies.
25            </p>
26            <p className="text-muted-foreground flex items-center gap-1.5 pt-1 text-xs">
27              <HugeiconsIcon icon={Calendar03Icon} size={14} />
28              Joined March 2024
29            </p>
30          </div>
31        </div>
32      </HoverCard.Content>
33    </HoverCard>
34  );
35}

Vista previa de enlace

En línea dentro de un párrafo, abriéndose arriba y alineada al inicio del enlace.

The incident started after the

v2.24.0 release

rolled out to the EU region, and was resolved by rolling back the pooling change.

1'use client';
2
3import { HoverCard } from '@/components/ui/hover-card';
4
5export function LinkPreview() {
6  return (
7    <p className="text-muted-foreground max-w-sm text-sm leading-relaxed">
8      The incident started after the{' '}
9      <HoverCard openDelay={200}>
10        <HoverCard.Trigger asChild>
11          <a
12            href="#"
13            className="text-foreground font-medium underline underline-offset-4"
14            onClick={(event) => event.preventDefault()}
15          >
16            v2.24.0 release
17          </a>
18        </HoverCard.Trigger>
19        <HoverCard.Content side="top" align="start" className="w-64 p-0">
20          <div className="bg-muted h-24 rounded-t-md" />
21          <div className="flex flex-col gap-1 p-3">
22            <p className="text-sm font-medium">Release v2.24.0</p>
23            <p className="text-muted-foreground text-xs">
24              Connection pooling for the EU region, new webhook retries, and 14 fixes.
25            </p>
26            <p className="text-muted-foreground text-xs">github.com/northwind/api</p>
27          </div>
28        </HoverCard.Content>
29      </HoverCard>{' '}
30      rolled out to the EU region, and was resolved by rolling back the pooling change.
31    </p>
32  );
33}

Referencia de API

Prop	Tipo	Por defecto	Descripción
`open`	`boolean`	-	Estado abierto controlado
`defaultOpen`	`boolean`	`false`	Estado inicial cuando no es controlado
`onOpenChange`	`(open: boolean) => void`	-	Se llama cuando cambia el estado
`openDelay`	`number`	`500`	Milisegundos de hover antes de abrir
`closeDelay`	`number`	`200`	Milisegundos después de salir antes de cerrar

HoverCard.Trigger

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Adjunta los handlers al hijo en lugar de un `span`

HoverCard.Content

Prop	Tipo	Por defecto	Descripción
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"bottom"`	Posición relativa al disparador
`align`	`"start"` \| `"center"` \| `"end"`	`"center"`	Alineación a lo largo de ese lado
`sideOffset`	`number`	`4`	Separación del disparador en píxeles
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorFrame

SiguienteIcon Tile