Popover

A floating panel with interactive content.

Overview

Popover opens from a click or keyboard activation of its trigger. The panel is portaled to the document body. Escape and an outside click close it, and focus returns to the trigger.

Unlike Tooltip, the panel can contain buttons, fields, and links. Focus is not trapped: tabbing can leave the panel. The panel is positioned against the trigger and moves when the page scrolls. Content taller than the viewport scrolls inside the panel.

Preview

Customize

Side

Align

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add popover

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function Details() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button type="button">Details</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p>Installed as source.</p>
      </PopoverContent>
    </Popover>
  );
}

Examples

Basic

Click the trigger. Escape or an outside click closes it and returns focus.

Alignment

side and align place the panel around the trigger. The panel follows the trigger when the page scrolls.

In practice

A profile settings panel combines a plan Badge, fields, Switches, and a save button. Long content scrolls inside the panel.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`open`	boolean	—	Controlled open state.
`defaultOpen`	boolean	`false`	Initial open state for an uncontrolled popover.
`onOpenChange`	(open: boolean) => void	—	Called when the popover opens or closes.
`side`	"top" \| "right" \| "bottom" \| "left"	`"bottom"`	Preferred side of the trigger.
`align`	"start" \| "center" \| "end"	`"center"`	Alignment along the chosen side.

Accessibility

The trigger sets aria-expanded, aria-haspopup="dialog", and aria-controls. The panel is a non-modal dialog.

Opening moves focus to the first control, or to the panel.
Escape and an outside click close it and return focus.
Each popover keeps its own open state.