Popover

Overview

Popover shows a short, supplementary note when the user clicks or taps its trigger. Use it for an icon's meaning, a truncated label, or a brief definition — never for content the user must read to complete a task.

Compose Popover with PopoverTrigger (the element being described) and PopoverContent (the floating card).

Clicking the trigger again, clicking outside the card, pressing Escape, or using the close button dismisses it. Hovering does nothing, on any device.

The card opens below the trigger by default.

Subcomponents

• PopoverTrigger — the clickable element the popover describes
• PopoverContent — the floating card, including its arrow and its close button

Examples

Basic Usage

PopoverTrigger renders a button by default. Give it an accessible name when its only child is an icon.

Wrapping Existing Elements

Pass asChild to PopoverTrigger to keep your own element as the trigger instead of rendering an extra button. Any element works as long as it accepts a ref and forwards the props Radix applies to it, though in practice the trigger is a button or an icon.

appearance defaults to unstyled here, so the trigger imposes nothing on the element you hand over — a Button keeps its background, border, and padding. It still gets the press nudge, which is behavior rather than appearance. Pass appearance="interactive" if the child is unstyled and wants the interactive treatment.

Placement

PopoverContent opens below the trigger by default, which is where it belongs in almost every case. side picks a different edge and align positions the card along it; both flip automatically when there isn't room in the viewport.

Import

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@im/integral/components/styled';

Props

Popover

PopoverTrigger

PopoverContent