Popover

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/popover

UsageCopy Anchor Link

import {
  Popover,
  PopoverClose,
  PopoverDescription,
  PopoverPopup,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover";

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>
  <PopoverPopup>
    <PopoverTitle>Title</PopoverTitle>
    <PopoverDescription>Description</PopoverDescription>
  </PopoverPopup>
</Popover>;

A popover is a dialog, so it needs a name. Add a PopoverTitle, or pass aria-label to PopoverPopup.

Close buttonCopy Anchor Link

PopoverClose closes the popover. Clicking outside or pressing Escape also closes it.

Tooltip styleCopy Anchor Link

tooltipStyle makes a popover look like a Tooltip. Use it for info buttons: unlike tooltips, popovers open on tap and work with screen readers.

API referenceCopy Anchor Link

Built on Base UI Popover. Every part accepts the props of its Base UI counterpart. PopoverPopup is also exported as PopoverContent.

PopoverPopupCopy Anchor Link