Item hover card
componentReveals an inspect popup for the trigger (e.g. an ItemTile / gear slot) — the in-game "hover gear to inspect" flyout.
Install
npx shadcn@latest add @engram/item-hover-cardRegistry item: /r/item-hover-card.json — the machine-readable definition agents install from.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | The trigger — typically an / gear slot. |
popup* | ReactNode | — | The inspect content shown on hover/click — typically an . |
openDelay | number | 90 | ms before the cursor-following preview opens on hover/focus. |
closeDelay | number | 140 | ms before the preview closes after the pointer leaves. |
as | "button" | "span" | "button" | Trigger element. Use `"span"` when the children are themselves interactive (e.g. an button) so the wrapper doesn't nest a `<button>` in a `<button>`; the child's own focus/click bubble up. Defaults to `"button"` (focusable on its own, for non-interactive children like a tile). |
anchor | "cursor" | "panel" | "cursor" | Where the preview is placed. - `"cursor"` (default): follows the cursor on hover, pins beside the trigger on click — the top-level item inspect behaviour. - `"panel"`: a secondary inspect nested *inside* an already-pinned panel (e.g. a mod within an ). It sits beside the whole panel (left/right), stays non-interactive, and never dismisses the parent pin — so sweeping across the mods just swaps the side popup. |
className | string | — | — |
Own the code: shadcn add copies this component's source into your repo to read and edit directly. Extend without forking — edit the source, use asChild to swap the element, or pass the typed annotations prop for curated data.