HoverCard

A floating card that appears on hover or focus of a trigger element.

Examples

Text Trigger

Account health

<HoverCard {...args} content={previewContent}>
  Account health
</HoverCard>

Button Trigger

<HoverCard
  {...args}
  content={
    <VStack gap={2} style={{maxWidth: 260}}>
      <Text as="p" type="label">
        Workspace
      </Text>
      <Text as="p" color="secondary">
        12 members, 4 pending invites
      </Text>
    </VStack>
  }>
  <Button label="Workspace" />
</HoverCard>

Placements

Above

StartEnd

Below

<div
  style={{
    display: 'grid',
    gap: 24,
    justifyItems: 'center',
    padding: '80px',
  }}>
  <HoverCard content={previewContent} placement="above">
    Above
  </HoverCard>
  <HStack gap={6}>
    <HoverCard content={previewContent} placement="start">
      Start
    </HoverCard>
    <HoverCard content={previewContent} placement="end">
      End
    </HoverCard>
  </HStack>
  <HoverCard content={previewContent} placement="below">
    Below
  </HoverCard>
</div>

Alignments

Start alignedCenter alignedEnd aligned

<VStack gap={4} style={{padding: 40}}>
  <HoverCard alignment="start" content={previewContent} placement="below">
    Start aligned
  </HoverCard>
  <HoverCard alignment="center" content={previewContent} placement="below">
    Center aligned
  </HoverCard>
  <HoverCard alignment="end" content={previewContent} placement="below">
    End aligned
  </HoverCard>
</VStack>

Disabled

Hover me (disabled)

<HoverCard {...args} content={previewContent} isEnabled={false}>
  Hover me (disabled)
</HoverCard>

Interactive Content

<HoverCard
  {...args}
  content={
    <VStack gap={3} style={{maxWidth: 280}}>
      <VStack gap={1}>
        <Text as="p" type="label">
          Jane Smith
        </Text>
        <Text as="p" color="secondary">
          Product Designer at Acme Corp
        </Text>
      </VStack>
      <HStack gap={2}>
        <Button label="View profile" size="sm" variant="secondary" />
        <Button label="Message" size="sm" variant="primary" />
      </HStack>
    </VStack>
  }>
  <Button label="Jane Smith" variant="ghost" />
</HoverCard>

Hover Indication

No underline on hoverAlways underline on hoverAuto (text triggers only)

<div
  style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'start',
    gap: 16,
  }}>
  <HoverCard content={previewContent} hoverIndication="never">
    No underline on hover
  </HoverCard>
  <HoverCard content={previewContent} hoverIndication="always">
    Always underline on hover
  </HoverCard>
  <HoverCard content={previewContent} hoverIndication="auto">
    Auto (text triggers only)
  </HoverCard>
</div>

Custom Delay

Slow open (800ms), slow close (500ms)

<HoverCard {...args} content={previewContent} delay={800} hideDelay={500}>
  Slow open (800ms), slow close (500ms)
</HoverCard>

API

A floating card that appears on hover or focus of a trigger element.

Prop	Type	Default	Description
`alignment`	`"center" \| "end" \| "start"`	`'center'`	Alignment along the placement axis.
`children`*	`ReactNode`	—	Trigger content.
`className`	`string`	—	Additional class names applied to the trigger wrapper for text triggers.
`content`*	`ReactNode`	—	Content shown in the floating hover card.
`data-testid`	`string`	—	Test ID applied to the trigger wrapper for text triggers.
`delay`	`number`	`300`	Delay before opening on hover, in milliseconds.
`focusTrigger`	`"auto" \| "always" \| "never"`	`'auto'`	Controls focus-trigger behavior.
`hideDelay`	`number`	`200`	Delay before closing after hover/focus leaves, in milliseconds.
`hoverIndication`	`'always' \| 'auto' \| 'never'`	`'auto'`	Dashed underline display for text triggers.
`isEnabled`	`boolean`	`true`	Whether hover/focus interactions are enabled.
`placement`	`"end" \| "start" \| "above" \| "below"`	`'above'`	Position relative to the trigger.
`ref`	`Ref<HTMLSpanElement>`	—	Ref forwarded to the text trigger wrapper.
`style`	`CSSProperties`	—	Inline styles applied to the text trigger wrapper.