Skip to content
github

Popover

The Popover component provides a way to create floating overlays that display rich content in a popup. It’s suited to menus, forms, or any content that needs to appear above other elements without disrupting the page flow.

It can be composed with subcomponents — Popover.Root, Popover.Trigger, Popover.Content, and Popover.Anchor — for a structured, customizable interface. Popover.Content supports built-in title, description, and linkProps for common patterns, while also allowing custom content through children.

Variations

Basic popover

The simplest form of a popover with just title and description.

Popover with custom content

You can include any custom content inside the popover by using children.

Hover trigger popover

Set triggerType to hover on the shorthand Popover to open on hover instead of click. You can also customize the hover delay and close delay.

The popover supports an integrated link using the linkProps prop.

Positioning

The popover can be positioned relative to its trigger using the side and align props.

Controlled popover

You can control the open state of the popover programmatically.

Using anchor

The Popover.Anchor component allows you to position the popover relative to a different element than the trigger.

Installation

import { Popover } from "@harnessio/ui/components";


//...


return (
  <Popover.Root>
    <Popover.Trigger asChild>
      <Button>Show Info</Button>
    </Popover.Trigger>


    <Popover.Content
      title="Information"
      description="This is additional information about the feature."
    />
  </Popover.Root>


  // --- or, using the shorthand component ---


  <Popover title="Popover Title" description="Popover description" content="Popover content">
    <Button>Show Info</Button>
  </Popover>
)