opinion
HoverCard
A preview that opens on hover or focus and closes when the pointer leaves.
Mention previewHover or Tab to @Maya
Handed the icon audit to @Maya for the Harbour rebrand launch.
In context
Activity feedNames and projects preview in place
Today
@Jonas moved Offline sync for tasks in Tideline mobile
@Maya moved Harbour homepage in Harbour rebrand
@Maya moved Brand palette in Harbour rebrand
Props
| Prop | Type | Required | Default |
|---|---|---|---|
trigger | ReactElement<unknown, string | JSXElementConstructor<any>> | Yes | — |
openDelay | number | undefined | No | — |
closeDelay | number | undefined | No | — |
open | boolean | undefined | No | — |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
Accessibility
Real Radix HoverCard underneath — opens on keyboard focus as well as pointer hover, so it's reachable without a mouse, not a hover-only pattern that silently excludes keyboard users.
data-rebar-* attributes
data-rebar-component="hover-card" on the content panel.
Migrating to Ant Design
Not codemod-covered — AntD's closest equivalent is Popover with trigger="hover", a prop-level mode switch on one component rather than two separate ones, so mapping this over is a structural change, not a rename.