CursorCard – Once UI

A component that displays floating content that follows the user's cursor when hovering over a trigger element. Useful for creating interactive tooltips, previews, or contextual information that enhances the user experience without requiring clicks.

CursorCard

See details

<CursorCard
  placement="bottom-right"
  maxWidth={24}
  trigger={
    <Button weight="default" variant="secondary">
      See details
    </Button>
  }
  overlay={
    <Card maxWidth={24} radius="l-4" direction="column" border="neutral-alpha-medium">
      {children}
    </Card>
  }
/>

Placement

The CursorCard component supports different placement options to control how the overlay content is positioned relative to the cursor.

Placement

Top left

Top

Bottom right

<CursorCard
  placement="top-left"
  trigger={
    <Button variant="secondary">
      Top left
    </Button>
  }
  overlay={
    <Row>
      Top left
    </Row>
  }
/>

<CursorCard
  placement="top"
  trigger={
    <Button variant="secondary">
      Top
    </Button>
  }
  overlay={
    <Row>
      Top
    </Row>
  }
/>

<CursorCard
  placement="bottom-right"
  trigger={
    <Button variant="secondary">
      Bottom right
    </Button>
  }
  overlay={
    <Row>
      Bottom right
    </Row>
  }
/>

API reference

	Type	Default
trigger The region that shows the overlay.	ReactNode	—
overlay What follows the pointer.	ReactNode	—
placement Where the overlay sits relative to the cursor.	toprightbottomlefttop-lefttop-rightbottom-rightbottom-left	bottom-left
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

Accessibility Considerations

The CursorCard component is designed for desktop use and automatically disables its functionality on touch devices. For touch devices, consider providing alternative ways to access the same information, such as expandable sections or dialogs.