Hover card

Vista previa al pasar o enfocar (un equipo, una persona). Nunca con acciones críticas adentro.

Primitiva disponible en la biblioteca, sin uso directo en la app actual. Vista previa al pasar el mouse o enfocar, sobre @base-ui/react/preview-card. Sirve para un equipo o una persona del staff.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/hover-card.json

import

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

Ejemplos

Nombre, rol y un dato corto. Nada que haya que clickear.

Responsable: Lucía Pereyra

Código

person.tsx

import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@moodinary/ui/components/hover-card";
import { InitialsAvatar } from "@moodinary/ui/components/initials-avatar";

export default function HoverCardPerson() {
	return (
		<p className="m-0 text-sm">
			Responsable:{" "}
			<HoverCard>
				<HoverCardTrigger href="#miembros/lucia-pereyra">
					Lucía Pereyra
				</HoverCardTrigger>
				<HoverCardContent className="w-[260px] p-3.5">
					<div className="flex items-center gap-2.5">
						<InitialsAvatar name="Lucía Pereyra" size={36} />
						<div>
							<b className="font-semibold text-[13px]">Lucía Pereyra</b>
							<div className="text-[12px] text-ink-3">
								Preceptora · 4.º A y 4.º B
							</div>
						</div>
					</div>
					<div className="mt-2.5 text-[12px] text-ink-3">
						3 acciones abiertas · última hace 2 días
					</div>
				</HoverCardContent>
			</HoverCard>
		</p>
	);
}

Props

HoverCardContent

Prop	Tipo	Default	Descripción
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Lado del disparador.
align	"start" \| "center" \| "end"	"start"	Alineación.
sideOffset	number	6	Distancia en px.

HoverCardTrigger

Prop	Tipo	Default	Descripción
href	string	-	Es un link; tiene que llevar a algún lado igual.

Cuándo sí y cuándo no

Hacé

Usalo como extra: el link tiene que funcionar sin la tarjeta.
Mostrá dos o tres datos, no más.
Usalo para staff y equipos.

Evitá

No pongas acciones críticas adentro.
No lo uses para participantes: son anónimos y no tienen perfil.
No dependas de él en mobile, donde no hay hover.

Abre también con foco de teclado.
El contenido es complementario; no tiene info que no esté en el destino del link.