HoverCard
OverlaysPreview card shown on hover/focus delay.
Radix HoverCard wrapper. Shows a floating panel after openDelay ms on hover and hides after closeDelay ms on mouse leave. Use for entity previews, user profiles, or enriched link previews.
Usage
import { HoverCard, HoverCardTrigger, HoverCardContent } from "nosible-ux"
import { Anchor } from "nosible-ux"
export default function Example() {
return (
<HoverCard>
<HoverCardTrigger asChild>
<Anchor href="#">AAPL</Anchor>
</HoverCardTrigger>
<HoverCardContent>
Apple Inc. — NASDAQ: AAPL
</HoverCardContent>
</HoverCard>
)
}Examples
Ticker preview
Accessibility
HoverCard content is not exposed to assistive technology while hidden. Keyboard users cannot trigger hover cards — ensure the same information is accessible by another route.
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
closeDelay | number | undefined | — | Milliseconds before the card closes after pointer leaves. Default: `200`. |
defaultOpen | boolean | undefined | — | |
onOpenChange | ((open: boolean) => void) | undefined | — | |
open | boolean | undefined | — | |
openDelay | number | undefined | — | Milliseconds before the card opens on pointer-enter. Default: `400`. |