Popover
Popover는 트리거 요소 근처에 부가 정보나 상호작용 콘텐츠를 표시하는 오버레이 컴포넌트입니다. 툴팁, 메뉴, 폼, 상세 정보 등을 표시할 때 사용합니다.Property
PositionerProps
Popover가 나타날 위치와 정렬을 설정합니다.
Offset
Popover와 트리거 간의 거리를 조정합니다.
Examples
Content Variations
간단한 텍스트부터 복잡한 상호작용 요소까지 다양한 콘텐츠를 표시합니다.
Props Table
Popover.Root
Root of the Popover compound component, which shows interactive content in a floating panel anchored to a trigger. Manages the open state. Doesn't render its own HTML element.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
actionsRef? | - | React.RefObject<Popover.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
handle? | - | PopoverHandle<unknown> |
modal? | false | booleantrap-focus |
onOpenChangeComplete? | - | function |
triggerId? | - | stringnull |
Popover.Trigger
Button that opens the popover when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
delay? | 300 | number |
handle? | - | PopoverHandle<unknown> |
nativeButton? | true | boolean |
openOnHover? | false | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Popover.Popup
Combines Popover.PortalPrimitive, Popover.PositionerPrimitive, and Popover.PopupPrimitive into a single part. Use portalElement or positionerElement to replace the portal or positioner. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
portalElement? | - | ReactElement<PopoverPortalPrimitive.Props> |
positionerElement? | - | ReactElement<PopoverPositionerPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Popover.PortalPrimitive
Portal container that renders the popover outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Popover.PositionerPrimitive
Positions the popover popup against its trigger and keeps it inside the viewport. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | center | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | absolute | fixedabsolute |
side? | bottom | bottomleftrighttopinline-endinline-start |
sideOffset? | 10 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
Popover.PopupPrimitive
The popover panel, with an arrow that points at the trigger. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Popover.Title
Heading that labels the popover for assistive technologies. Renders an <h2> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Popover.Description
Paragraph that provides supplementary text for the popover, linked to the popover panel for assistive technologies. Renders a <p> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Popover.Close
Button that closes the popover when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |