HoverCard
Overlays

HoverCard

Rich hover preview for user profiles, repo summaries, and linked entity details.

Component behavior

HoverCard displays supplementary content while the trigger or card is hovered. Required actions must remain available outside the hover card.

Use cases
  • Summaries of linked users, repositories, or resources.
  • Supplementary content without required actions.
  • Previews displayed without leaving the current page.
Alternatives

Tooltip: a short text label is sufficient.

PopoverPanel: the content includes controls or must remain open.

Drawer: the task requires a complete record view.

Props

HoverCard reveals content on hover/focus. The card stays open while hovered, so the pointer can move from trigger to card without it vanishing.

HoverCardProps props
PropTypeDefaultDescription
triggerReactElement—Element that reveals the card on hover/focus.
childrenReactNode—Card content composed from HoverCardHeader, HoverCardBody, and HoverCardStats.
openDelaynumber350Delay before showing, in ms.
closeDelaynumber180Delay before hiding, in ms.
placementPlacement"bottom-start"Card placement relative to trigger.
offsetnumber—Gap between trigger and card, in px.
widthnumber260Card width in px.
disabledboolean—Suppresses the card entirely.

Sub-components

HoverCardHeader

HoverCardHeaderProps props
PropTypeDefaultDescription
mediaReactNode—Avatar, logo, or status dot.
titleReactNode—Name or heading.
subtitleReactNode—Handle, email, or secondary label.
actionReactNode—Right-aligned action content.

HoverCardBody

HoverCardBodyProps props
PropTypeDefaultDescription
childrenReactNode—Body text or content.

HoverCardStats

HoverCardStatsProps props
PropTypeDefaultDescription
stats{ label: ReactNode; value: ReactNode }[]—Array of label/value pairs for the stat strip.

Examples

User hover card

HoverCard
ImportTSX
import {
  HoverCard,
  HoverCardHeader,
  HoverCardBody,
  HoverCardStats,
  Avatar,
} from "@solarius/onset";

<HoverCard trigger={<a href="#">@jane</a>}>
  <HoverCardHeader
    media={<Avatar name="Jane Cooper" size="sm" />}
    title="Jane Cooper"
    subtitle="@janecooper"
  />
  <HoverCardBody>Senior infrastructure engineer.</HoverCardBody>
  <HoverCardStats
    stats={[
      { label: "Repos", value: 47 },
      { label: "Followers", value: "2.3k" },
    ]}
  />
</HoverCard>;