Component reference
HoverCard
Supplementary profile information on a named trigger.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import {
HoverCard,
HoverCardTrigger,
Button,
HoverCardContent,
Badge,
Link
} from "@pimolu/react";
function ProfileCard() {
return (
<HoverCard placement="bottom" openDelay={200} closeDelay={150}>
<HoverCardTrigger>
<Button appearance="ghost">Ada Lovelace</Button>
</HoverCardTrigger>
<HoverCardContent label="Ada Lovelace profile">
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
<strong>Ada Lovelace</strong>
<Badge variant="success">Available</Badge>
</div>
<p className="max-w-prose leading-relaxed">
Mathematician and writer, known for the first published
algorithm intended for a machine.
</p>
<p className="text-sm text-muted">London · she/her · joined 1843</p>
<Link href="#hover-card" className="pimolu-link">View full profile</Link>
</div>
</HoverCardContent>
</HoverCard>
);
}
export function DemoExample() {
return (<ProfileCard />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Package information
Focus or hover the trigger to inspect a package; follow the real installation guide.
Delays
The open delay prevents accidental previews while the pointer crosses the page.
People
A people composition using HoverCard.
Usage
Keep essential actions available without hover; choose Popover or Dialog for required interactions.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluHoverCardProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | The trigger and the content. `HoverCardTrigger` must receive the single element that opens the card. |
placement | PimoluHoverCardPlacement | undefined | "bottom"; the card flips to the opposite side when there is not enough room | Preferred side. Defaults to "bottom"; the card flips to the opposite side when there is not enough room. |
openDelay | number | undefined | 300 | Delay before opening, in milliseconds. Defaults to 300. |
closeDelay | number | undefined | 150 | Delay before closing, in milliseconds. Defaults to 150. |
offset | number | undefined | 8 | Distance between the trigger and the card, in pixels. Defaults to 8. |
disabled | boolean | undefined | false | Never open. |
childrenRequiredReactNodeNo default extracted.
The trigger and the content. `HoverCardTrigger` must receive the single element that opens the card.
placementPimoluHoverCardPlacement | undefinedDefault: "bottom"; the card flips to the opposite side when there is not enough room
Preferred side. Defaults to "bottom"; the card flips to the opposite side when there is not enough room.
openDelaynumber | undefinedDefault: 300
Delay before opening, in milliseconds. Defaults to 300.
closeDelaynumber | undefinedDefault: 150
Delay before closing, in milliseconds. Defaults to 150.
offsetnumber | undefinedDefault: 8
Distance between the trigger and the card, in pixels. Defaults to 8.
disabledboolean | undefinedDefault: false
Never open.
PimoluHoverCardTriggerProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The single element that opens the card: any element, or a component that passes down the props it receives. It gets the ARIA state, the event handlers and the ref, and the handlers it already had keep working. |
childrenRequiredReactElement<unknown, string | JSXElementConstructor<any>>No default extracted.
The single element that opens the card: any element, or a component that passes down the props it receives. It gets the ARIA state, the event handlers and the ref, and the handlers it already had keep working.
PimoluHoverCardLabelling
Type source| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | — | Visible label associated with the control. |
labelledBy | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
labelstring | undefinedNo default extracted.
Visible label associated with the control.
labelledBystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluHoverCardContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
label | string | undefined | — | Visible label associated with the control. |
labelledBy | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Rich, interactive content of the card. |
className | string | undefined | — | Class applied to the panel. |
labelstring | undefinedNo default extracted.
Visible label associated with the control.
labelledBystring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Rich, interactive content of the card.
classNamestring | undefinedNo default extracted.
Class applied to the panel.
Accessibility
- Test keyboard focus and touch access, and avoid hiding necessary information from non-hover users.