Components / Hover Card
Hover Card
Rich hover preview with configurable open/close delays. Ideal for user cards, link previews, or any content that benefits from non-intrusive hover interactions.
overlays v0.7.0
Playground
Examples
User card preview
Alice JohnsonSenior Engineer · Joined 2023
Building the future of AI-native interfaces.
<cg-hover-card placement="top"><a href="#" style="color:var(--cg-color-action-primary-background-default);">@alice</a><div slot="content" style="display:flex;flex-direction:column;gap:8px;"><strong>Alice Johnson</strong><span style="color:var(--cg-color-surface-container-outlined);font-size:13px;">Senior Engineer · Joined 2023</span><p style="margin:0;font-size:13px;">Building the future of AI-native interfaces.</p></div></cg-hover-card>Import
import { CgHoverCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-hover-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
placement | "top" | "bottom" | "left" | "right" | "top" | Preferred placement |
offset | number | 8 | Distance from trigger in px |
open-delay | number | 700 | Delay before opening (ms) |
close-delay | number | 300 | Delay before closing (ms) |
Events
| Event | Detail | Description |
|---|---|---|
cg-hover-card-open | {} | Card opened |
cg-hover-card-close | {} | Card closed |