Home

Popover

A small floating card anchored to a button, with no backdrop, that closes on a click outside or on Escape.

ui.popovercomponents/ui/popover.tsx

Use case

For the AI

Use it for a little more than a tooltip and much less than a dialog: explaining what an "Outstanding balance" figure counts, a calendar under a date field, one setting changed in place beside the control it belongs to. The page stays live behind it, and its content scrolls and fades if it outgrows the screen. The date picker is a popover holding a calendar.

Use it when

  • A short explanation a person asks for by pressing a button
  • A calendar or another small control that belongs to a field
  • One or two settings changed in place
  • Content with a link or a button, which a tooltip cannot hold

Use something else when

  • A list of actions to choose from: Dropdown menu
  • A name for an icon button, shown on hover: Tooltip
  • Picking a date for a field: Date picker
  • A form with a save, or a task that must be finished: Dialog

Examples

Code

Import

import { InfoIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Popover, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"

Usage

<Popover>
  <PopoverTrigger render={<Button variant="secondary" />}>
    <InfoIcon />
    What Is This?
  </PopoverTrigger>
  <PopoverPopup className="w-72">
    <PopoverTitle className="text-[14px] font-medium">Outstanding balance</PopoverTitle>
    <PopoverDescription className="mt-1 text-[13px] leading-relaxed text-ink-4">
      Everything invoiced and not yet paid, taxes included, across every live invoice.
    </PopoverDescription>
  </PopoverPopup>
</Popover>

Rules

  • The trigger is a real button through `render={<Button />}`, so it opens on a press and from the keyboard, never on hover alone.
  • Give it a width on `PopoverPopup` (`w-72`); a calendar inside takes `w-auto p-0`.
  • Size `PopoverTitle` as the showcase does (`text-[14px] font-medium`): its default is larger than the library's popups.
  • When choosing something should close it (a date), control `open` and close it in the handler.