Popover

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

Basic Popover

Positioning

Use the side and align props.

Usage

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

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="grid gap-4">
      <h4 className="font-medium">Title</h4>
      <p className="text-sm text-muted-foreground">
        Content goes here.
      </p>
    </div>
  </PopoverContent>
</Popover>

{/* With positioning */}
<PopoverContent side="top" align="start">
  ...
</PopoverContent>

Dialog

Toast