reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Popover
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Popover

Component

Show floating content anchored to a trigger using the Popover primitive.

overlay
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { PopoverRoot, PopoverTrigger, PopoverContent, PopoverClose } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

Usage guidance

Anatomy

  • Place Trigger and Content inside PopoverRoot. Content can also include a Close control.

Best practices

  • Use for short supporting tasks related to the trigger. Set position through PopoverRoot.placement.

Usage to avoid

  • Do not confine complex required input to a small popover. Give the trigger an accessible name.

Usage examples

Open and close supporting information

PopoverContent

PropTypeDefaultDescription
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (7)time-range-selectorcolumn-togglermega-menusaved-filtersnotification-centerquery-filters-menuquery-variables-menuPopover
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 트리거를 렌더링한다
  • 클릭 시 콘텐츠를 표시한다

키보드 동작

키동작
Esc팝오버 닫기
Enter / Space트리거 활성화

Related components

opt-ui

Disclosure

Core

Expand and collapse content with Root, Trigger, and Content components.

opt-ui

Dialog

Core

Compose accessible modal dialogs with triggers, headings, descriptions, dismissal controls, and header, body, and footer regions.

opt-ui

Drawer

Core

Open accessible side or bottom sliding panels with a Dialog-based compound API.

opt-ui

Menu

Core

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

opt-ui

DropdownMenu

Core

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

PreviousConditionBuilderNextDropdownMenu