Composite
Hover Card Requires JS
A rich preview that appears when the user hovers over a link or avatar. Think Twitter / GitHub profile cards on hover. Larger and more leisurely than a Tooltip; doesn't trap focus like a Popover.
About
Overview
Hover cards show a peek of related content without forcing the user to navigate. Use them on user mentions, tags, internal links — anywhere a quick preview helps. They're voluntary previews, not modals; they shouldn't carry actions the user has to take.
Tooltip vs Hover Card. Tooltip is text-only and small (a label, a shortcut). Hover Card is rich content with images and structure, sized like a small popover.
Live
Demo
The component activates after a 700 ms hover delay (longer than Tooltip's 300 ms — gives the user a beat to keep moving past the trigger if they don't actually want the preview).
Hover the link to see the user preview: @ren shipped this design system.
<ren-hover-card>
<a slot="trigger" href="/users/ren">@ren</a>
<div slot="content">
<img src="/avatars/ren.jpg" class="ren-avatar">
<h3>Ren Soconese</h3>
<p>Designer · Buenos Aires</p>
<p class="muted">Joined March 2024 · 142 projects</p>
</div>
</ren-hover-card>Reference
API
| Class | Effect |
|---|---|
.ren-hover-card | The floating panel. Card-like surface with shadow and padding. |
Web Component attributes
| Attribute | Type | Default | Notes |
|---|---|---|---|
delay | number (ms) | 700 | Hover dwell before showing. |
close-delay | number (ms) | 300 | Time after the cursor leaves both trigger and card before closing — gives the user a moment to move into the card. |
placement | "top" | "right" | "bottom" | "left" | "bottom" | Side relative to the trigger. |
Inclusive by default
Accessibility
- Trigger must be a real link or button. Focusing it via Tab also opens the card (not just hover).
- Card content is supplementary — never put critical information here. Touch users won't see it.
- If the card contains links or actions, those should ALSO live somewhere reachable — on the linked profile page, in a menu.
- Esc closes the card while focus stays on the trigger.