HoverCard

The HoverCard component provides a popup card that appears when hovering over a trigger element. It’s useful for displaying additional information without requiring a click.

Usage

import { HoverCard } from '@harnessio/ui/components'

//...

return (
  <HoverCard.Root>
    <HoverCard.Trigger asChild>
      <button>Hover over me</button>
    </HoverCard.Trigger>
    <HoverCard.Content>
      <h3>Hover Card Content</h3>
      <p>This is the content that appears when hovering.</p>
    </HoverCard.Content>
  </HoverCard.Root>
)

Anatomy

All parts of the HoverCard component can be imported and composed as required.

<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Content />
</HoverCard.Root>

API Reference

Root

The Root component is the root container for the hover card functionality.

<HoverCard.Root
  open                  // [OPTIONAL] Open state of the hover card
  defaultOpen           // [OPTIONAL] Default open state of the hover card
  onOpenChange={onOpen} // [OPTIONAL] Callback when the open state of the card changes
  openDelay={200}       // [OPTIONAL] Delay in milliseconds to show the card
  closeDelay={100}      // [OPTIONAL] Delay in milliseconds to close the card
>
  {/* Trigger and Content */}
</HoverCard.Root>

Prop	Required	Default	Type
open	false		boolean
defaultOpen	false		boolean
onOpenChange	false		(open: boolean) => void
openDelay	false		number
closeDelay	false		number

Trigger

The Trigger component wraps the element that will trigger the hover card to appear.

<HoverCard.Trigger
  asChild           // [OPTIONAL] render the trigger as the child
  className="class" // [OPTIONAL] Additional CSS classes
>
  <button>Hover over me</button>
</HoverCard.Trigger>

Prop	Required	Default	Type
asChild	false		boolean
className	false		string

Content

The Content component contains the content that will be displayed when the trigger is hovered over.

<HoverCard.Content
  asChild                          // [OPTIONAL] render the content as the child
  forceMount                       // [OPTIONAL] Force mounting when more control is needed
  side="bottom"                    // [OPTIONAL] Side of the trigger, can be "top", "right", "bottom", "left"
  sideOffset={4}                   // [OPTIONAL] Offset from the trigger
  align="center"                   // [OPTIONAL] Alignment of the content, can be "start", "center", "end"
  alignOffset={4}                  // [OPTIONAL] Offset from the alignment
  avoidCollisions                  // [OPTIONAL] Avoid collisions with other elements
  collisionBoundary={[boundaryEl]} // [OPTIONAL] Boundary to use for collision detection
  collisionPadding={4}             // [OPTIONAL] Padding to apply to the collision detection
  sticky="partial"                 // [OPTIONAL] sticky behavior on the align axis, can be "partial" or "always"
  className="class"                // [OPTIONAL] Additional CSS classes
>
  {/* Hover card content */}
</HoverCard.Content>

Prop	Required	Default	Type
asChild	false		boolean
forceMount	false		boolean
side	false		string
sideOffset	false		number
align	false		string
alignOffset	false		number
avoidCollisions	false		boolean
collisionBoundary	false		Element | Element[]
collisionPadding	false		number
sticky	false		string
className	false		string