Popover

Use a popover when the anchored content contains controls or needs several lines of explanation. Use a dropdown menu for a list of commands and a tooltip for a short label.

Filter invoices

Show codeCopy

Import

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

Composition

PopoverTrigger accepts asChild, so the existing button keeps its semantics and styling. Place headings in PopoverHeader, keep form labels visible, and close controlled popovers after a successful action. align="start" works well for filters because the panel follows the trigger's reading edge.

Accessibility

The trigger must remain a focusable control with an accessible name. Do not put essential information behind hover alone. Initial focus moves into interactive content, Escape closes the surface, and focus returns to the trigger through the primitive.

Best practices

• Keep the task small enough for the 18rem surface.
• Use a dialog or sheet for multi-step work.
• Apply or cancel explicitly when edits should not take effect immediately.