# HoverCard A preview of where a link goes, shown when a mouse rests on the link or the keyboard focuses it: a cook's profile, a recipe's summary. It shows only on devices that can hover and never after a touch, so the link must work without it. ```tsx import { HoverCard } from "@/components/ouro/hover-card/hover-card"; ``` ## Example ```tsx Ari Mendelow}> ``` ## Usage It stacks above the page at `--ouro-layer`, a z-index of 50 by default (from ouro-base.css), like Dialog and Sheet. ## Use instead when - Use `Tooltip` instead for a short label, and `Popover` for anything the user needs or acts on, since a Popover opens on tap. ## Props Type: `HoverCardProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `align` | `"start" \| "center" \| "end"` | `"center"` | How the card lines up with the link along that side. | | `children` (required) | `ReactNode` | | The preview: a few lines about where the link goes. Only what the user can do without; put controls elsewhere. | | `className` | `string` | | Layout only, applied to the card: width (18rem, `w-72`, by default) and padding. Your classes win over Ouro UI's. Appearance classes warn in development. | | `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | The side of the link the card sits on; it flips when there is no room. | | `trigger` (required) | `ReactElement` | | The link the card previews: `trigger={Ari}`. It works on its own: touch users, and devices that cannot hover, get only the link. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `closeDelay`: Not a prop. Ouro UI sets the delays: ``. - `content`: Not a prop. The preview is the children: `…`. - `openDelay`: Not a prop. Ouro UI sets the delays: ``. - `placement`: Not a prop. Ouro UI splits placement into `side` and `align`: ``. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: HoverCard merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes] Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: use the `align` prop. [^layout-classes]: test:registry/ouro/components/ouro/hover-card/hover-card.test.tsx::HoverCard > sits on the side and alignment it is given, and className sets layout verify:testExists(registry/ouro/components/ouro/hover-card/hover-card.test.tsx::HoverCard > sits on the side and alignment it is given, and className sets layout)