hover-card
Hover-triggered preview card for sighted users.
A HoverCard opens when the user hovers over a trigger (typically a link) and
closes when the pointer leaves, with configurable open/close delays. It is
non-modal and designed for supplemental content only — not for interactive
controls (use @fluixi/popover instead).
Installation
pnpm add @fluixi/hover-card
Usage
import { HoverCard, HoverCardTrigger, HoverCardPortal, HoverCardContent } from '@fluixi/hover-card';
<HoverCard openDelay={300} closeDelay={150}>
<HoverCardTrigger href="/users/jane">@jane</HoverCardTrigger>
<HoverCardPortal>
<HoverCardContent>
<img src="/jane.jpg" alt="" />
<p>Jane Doe · joined 2022</p>
</HoverCardContent>
</HoverCardPortal>
</HoverCard>
Parts
| Part | Description |
|---|---|
HoverCard |
Root. openDelay / closeDelay (ms); controlled open or uncontrolled defaultOpen with onOpenChange. placement and offset configure Floating UI. |
HoverCardTrigger |
An <a> by default; forwards pointer enter/leave events. |
HoverCardPortal |
Portals content to <body> while open. |
HoverCardContent |
The floating card; data-placement reflects the resolved side. |
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.