Hover Card
A heavier Tooltip: the same popover="manual" and useFloatingPosition mechanism, but for richer, often interactive content, so opening and closing are deliberate rather than instant. A real delay before showing gives a passing pointer room to not trigger it, and a matching delay before hiding gives the pointer time to travel from the trigger into the card itself. Focus shows it immediately, a keyboard user tabbing to the trigger shouldn't have to wait out a mouse-tuned delay.interestfor is declared on the trigger too, as a forward-looking, purely additive enhancement for the emerging native hover-intent API.
Karl Koch
Designs and builds Kernel UI.
Playground
Toggle every adjustable prop and watch the component — and the code — update live.
kernel-ui
Karl Koch
Designs and builds Kernel UI.
Usage
<HoverCard
render={<a href="https://github.com/kemiljk/kernel-ui">kernel-ui</a>}
content={/* Avatar + name + bio */}
/><kernel-hover-card>
<a slot="trigger" href="https://github.com/kemiljk/kernel-ui">kernel-ui</a>
<!-- Avatar + name + bio -->
</kernel-hover-card>Props
| Prop | Type | Default |
|---|---|---|
content | ReactNode (required) | — |
render | the trigger element (required) | — |
renderContent | RenderProp — replace the popup | — |
className | string | (state) => string | — |
placement | "top" | "bottom" | "left" | "right" | "bottom" |
align | "start" | "center" | "end" | "center" |
offset | number (px) | 8 |
openDelay | number (ms) | 150 |
closeDelay | number (ms) | 100 |
Accessibility
- The trigger gets
aria-describedbypointing at the card, same as Tooltip. - Focus opens the card without the hover delay, so keyboard users aren't penalized for not having a mouse.
- The card stays open while the pointer is over it, so its content (a link, say) is actually reachable rather than closing the instant the pointer leaves the trigger.
popover="manual"keeps native top-layer stacking and doesn't fight the custom hover timing the waypopover="auto"'s light-dismiss would.