Clinia UI

Popover

Rich content anchored to a trigger, such as help text or a small form.

shadcn docs →

When to use

  • Short help or detail anchored to a control: what an API key scope allows, who can see a record.
  • A small form of one or two fields that belongs to its trigger: rename a workspace, pick a date.

When not to use

  • A one-line label for an icon button: use Tooltip.
  • A list of actions: use Dropdown Menu.
  • A task with several fields and a footer: use Dialog.
  • A preview of a linked record on hover: use Hover Card.

Install

npx shadcn@latest add @clinia/popover

Anatomy

Share this view

Anyone in the workspace with the link can open it.

  1. 1Triggerdata-slot="popover-trigger"Button
  2. 2Popoverdata-slot="popover-content"bg-popover · w-72 · p-4
  3. 3Titledata-slot="popover-title"text-base · font-medium
  4. 4Descriptiondata-slot="popover-description"text-muted-foreground

Clinia rules

  • It is w-72 with p-4 by default. Widen it with className rather than cramming content in.
  • For a titled popover, use PopoverHeader with PopoverTitle (text-base font-medium) and PopoverDescription (text-muted-foreground).
  • Keep it to one idea. If it needs to scroll, it belongs in a Sheet or a Dialog.

Do and don't

Share this view

Anyone in the workspace with the link can open it.

Do keep it to one idea, such as a link to copy.

Edit source

Don't fit a form with several fields and a footer in it. Use Dialog.

Accessibility

Built in

  • Opens on click, Enter or Space. Escape or a click outside closes it, and focus returns to the trigger.
  • PopoverTitle and PopoverDescription name and describe the popup for screen readers.

Your responsibility

  • Give an icon-only trigger an aria-label that says what it opens: About API key scopes.
  • Render a PopoverTitle in any popover with a form, so the popup has a name.

How to test

  1. Press Tab to the trigger, then Enter: the popover opens.
  2. Press Tab: focus moves through the popover's content.
  3. Press Escape: it closes and focus returns to the trigger.
  4. With a screen reader, the trigger announces its label, and opening it reads the popover's title.

API

PopoverContent

PropValuesDefaultDescription
align
centerstartend
center

Edge of the trigger the popover lines up with.

alignOffset
number | OffsetFunction
0

Shift along the aligned edge, in pixels.

side
topbottomleftrightinline-endinline-start
bottom

Side of the trigger the popover opens on.

sideOffset
number | OffsetFunction
4

Gap between the trigger and the popover, in pixels.

All other props come from Base UI Popover.

Related