# HoverCard

> A supplementary detail panel that appears beside a trigger on hover or keyboard focus — a user card beneath an @mention, a definition beneath a term.

```ts
import { HoverCard } from "@sdxc/ui";
```

Renders the compound root: a `<span>` providing HoverCard.Content's
anchor and the hover/focus-within scope that reveals it, so hovering or
focusing the trigger or panel keeps it open with no script-tracked state.

## Examples

```tsx
<HoverCard>
	<HoverCard.Trigger>
		<Link href={`/users/${user.handle}`}>@{user.handle}</Link>
	</HoverCard.Trigger>
	<HoverCard.Content aria-label={t("userCard.label", { name: user.name })}>
		<p>{user.bio}</p>
	</HoverCard.Content>
</HoverCard>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The compound root's parts: HoverCard.Trigger followed by HoverCard.Content. |

Also accepts everything in `TagProps<"span">`.


### HoverCard.Trigger

Renders HoverCard.TriggerProps.children inside a `<span>` styled `display: contents`, so the trigger keeps the child's own layout and hover/focus-within participation, visible straight through to the root above.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The visible trigger — a link, button, or other element. The root reveals HoverCard.Content whenever focus or a hover-capable pointer rests inside it, so pointer users reach the panel even without a focusable child. |

Also accepts everything in `TagProps<"span">`.


### HoverCard.Content

Renders the panel: a `<div>` sharing Popover's surface and placement contract, kept in normal stacking order for its CSS-driven hover/focus reveal, with delays tuned for pointer and keyboard users.

| Prop | Type | Description |
| --- | --- | --- |
| `placement?` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side of the trigger to render against. Defaults to DEFAULT_PLACEMENT. |
| `children` | `RemixNode` | The panel's content. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Placement` | `"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"` | Side of the trigger the panel renders against, and — for corner variants — which trigger edge it aligns to on the perpendicular axis. |