Introduction

Popovers display rich content in a floating panel anchored to a trigger element. Unlike tooltips, they support complex content including forms, buttons, and structured layouts.

Installation

import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';

Usage

<Popover>
<PopoverTrigger asChild>
  <Button variant="outlined">Open</Button>
</PopoverTrigger>
<PopoverContent>
  <p>Popover content here.</p>
</PopoverContent>
</Popover>

Examples

Default

PopoverDefault

import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

export default function Component() {
  return (
    <Popover>
      <PopoverTrigger asChild><Button variant="outlined">Open Popover</Button></PopoverTrigger>
      <PopoverContent>
        <h4 className="font-medium">Popover Title</h4>
        <p className="text-sm text-neutral-500">Popover content here.</p>
      </PopoverContent>
    </Popover>
  );
}

Placements

PopoverPlacements

import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

export default function Component() {
  return (
    <div className="flex gap-4">
      {(['top', 'bottom', 'left', 'right'] as const).map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild><Button variant="outlined" size="sm">{side}</Button></PopoverTrigger>
          <PopoverContent side={side} className="w-60"><p className="text-sm">Popover on {side}</p></PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

API Reference

PopoverContent

Prop	Type	Default	Description
`side`	`top \| bottom \| left \| right`	`bottom`	Preferred placement
`align`	`start \| center \| end`	`center`	Alignment
`sideOffset`	`number`	`4`	Distance from trigger

Popover

On this page