Components Overlays
HoverCard
StableA rich preview that appears when hovering or focusing a link.
HoverCard lets sighted users peek at a person, template or document without leaving the page. It is purely supplementary: the link must lead somewhere that shows the same information, because touch and screen reader users will not see the card. For content users must interact with, use Popover.
Overview
Approved by Ada Lovelace on 3 November.
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';
export function Person() {
return (
<p style={{ margin: 0 }}>
Approved by{' '}
<HoverCard>
<HoverCardTrigger href="#ada">Ada Lovelace</HoverCardTrigger>
<HoverCardContent>
<div style={{ display: 'grid', gap: 4 }}>
<strong>Ada Lovelace</strong>
<span>Head of Operations · London</span>
<span>Owns 14 templates · Admin</span>
</div>
</HoverCardContent>
</HoverCard>{' '}
on 3 November.
</p>
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Approved by Ada Lovelace on 3 November.
Approved by Ada Lovelace on 3 November.
Approved by Ada Lovelace on 3 November.
Import
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@bindshq/stance-react';Examples
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';
export function Template() {
return (
<HoverCard>
<HoverCardTrigger href="#template">Sales, EMEA</HoverCardTrigger>
<HoverCardContent side="right" align="start">
<div style={{ display: 'grid', gap: 6, width: 240 }}>
<strong>Sales, EMEA</strong>
<span>Assigned to 32 people</span>
<span>Last deployed 2 days ago</span>
</div>
</HoverCardContent>
</HoverCard>
);
}Custom delays
Shorter delays suit dense lists; longer ones avoid accidental opens.
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@bindshq/stance-react';
export function Delays() {
return (
<HoverCard openDelay={200} closeDelay={100}>
<HoverCardTrigger href="#fast">Quick preview</HoverCardTrigger>
<HoverCardContent>Opens after 200ms and closes after 100ms.</HoverCardContent>
</HoverCard>
);
}API reference
HoverCard
| Prop | Type | Default | Description |
|---|---|---|---|
openDelay | number | 600 | Delay before opening on hover, in ms. |
closeDelay | number | 300 | Delay before closing after the pointer leaves. |
open / defaultOpen / onOpenChange | boolean / boolean / (open: boolean) => void | None | Controlled or uncontrolled state. |
HoverCardTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render your own link (e.g. a router Link). Defaults to <a>. |
...props | AnchorHTMLAttributes | None | href and other link attributes. |
HoverCardContent
| Prop | Type | Default | Description |
|---|---|---|---|
side / align / sideOffset | Side / Align / number | 'bottom' / 'center' / 8 | Placement relative to the trigger. |
collisionPadding / avoidCollisions | number / boolean | 8 / true | Viewport collision handling. |
Accessibility
- Opens on keyboard focus as well as hover; Escape closes it.
- Not focus-trapped and not announced: the link itself remains the accessible path to the information.
- Touch input does not open the card.
Keyboard
| Keys | Action |
|---|---|
| Tab | Focusing the trigger opens the card after the delay. |
| Esc | Closes the card. |
Usage guidelines
Do
- Use on links to people, templates and documents.
- Keep the card to a summary: name, role, a few facts.
Don’t
- Put actions in the card that exist nowhere else.