Popover

Displays rich content in a portal, triggered by a button.

overlayinteractive

Loading preview...

Installation

npx baseui-cn add popover

Usage

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from "@/components/ui/popover"

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Settings</PopoverTitle>
      <PopoverDescription>Adjust your preferences.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

System specimen

Popover, Tooltip, Preview Card, Dropdown Menu and Menubar share the V2 anchored surface vocabulary. Use the controls to compare form nesting, persistent menu choices and submenus. Tooltip help is supplementary; each action keeps a visible label.

Loading preview...

Examples

Basic

A simple popover.

Loading preview...

With form

A popover containing a form.

Loading preview...

Placement

Popover positioned on different sides.

Loading preview...

API

PopoverContent

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the trigger the popover opens on
`sideOffset`	`number`	`4`	Distance in px between the popover and the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`alignOffset`	`number`	`0`	Offset in px along the alignment axis

positionerProps forwards native Base UI Positioner options, including anchor, collision boundaries/padding, positioning method and refs. Options supplied there override the convenience positioning props above.

API Reference

See the Base UI Popover documentation for the full API reference, including all props, data attributes, and CSS classes.