Popover
shadcn/uiDisplays rich content in a portal, triggered by a button.
Popover
Installation
Props
<Popover />
Name | Type | |
|---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sideOffset | number | |
alignOffset | number | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |
<PopoverContent />
Name | Type | |
|---|---|---|
positionerClassName | any | |
align | string(default: center) | |
alignOffset | number(default: 0) | |
side | string(default: bottom) | |
sideOffset | number(default: 4) | |
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |
<PopoverDescription />
Name | Type | |
|---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sideOffset | number | |
alignOffset | number | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |
<PopoverHeader />
Name | Type | |
|---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sideOffset | number | |
alignOffset | number | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |
<PopoverTitle />
Name | Type | |
|---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sideOffset | number | |
alignOffset | number | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |
<PopoverTrigger />
Name | Type | |
|---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | (...args) => void | |
onOpenChangeComplete | ((open: boolean) => void) | |
modal | boolean | "trap-focus" | |
triggerId | string | |
defaultTriggerId | string | |
nativeButton | boolean | |
render | React.ReactElement | |
payload | object | |
openOnHover | boolean | |
delay | number | |
closeDelay | number | |
keepMounted | boolean | |
container | HTMLElement | RefObject<HTMLElement> | |
anchor | (...args) => Element | |
positionMethod | "absolute" | "fixed" | |
sideOffset | number | |
alignOffset | number | |
sticky | boolean | |
arrowPadding | number | |
disableAnchorTracking | boolean | |
initialFocus | boolean | HTMLElement | |
finalFocus | boolean | HTMLElement |