animation
Description
The animation of the popover.
Type
"bottom" | "left" | "none" | "right" | "scale" | "top"
Default
'scale'
Leave Yamada UI a star
StarPopover
is a component that floats around an element to display information.
Description
The animation of the popover.
Type
"bottom" | "left" | "none" | "right" | "scale" | "top"
Default
'scale'
Description
The boundary area for the popper. Used within the preventOverflow
modifier.
Type
"clippingParents" | "scrollParent" | HTMLElement
Default
'clippingParents'
Description
The number of delay time to close.
Type
number
Default
200
Description
If true
, the popover will close when you blur out it by clicking outside or tabbing out.
Type
boolean
Default
true
Description
If true
, the popover will close when you hit the Esc
key.
Type
boolean
Default
true
Description
If true
, the popover will be initially opened.
Deprecated
Use defaultOpen
instead
Type
boolean
Description
If true
, the popover will be initially opened.
Type
boolean
Description
The animation duration.
Type
number | MotionLifecycleProps<number>
Description
If provided, determines whether the popper will reposition itself on scroll
and resize
of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }
Default
true
Description
If true
, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
boolean
Default
true
Description
The distance or margin between the reference and popper.
It is used internally to create an offset
modifier.
Type
UIValue<number>
Default
8
Description
If true
, the PopoverContent rendering will be deferred until the popover is open.
Deprecated
Use lazy
instead
Type
boolean
Default
false
Description
If true
, the popover will be opened.
Deprecated
Use open
instead
Type
boolean
Description
If true
, the PopoverContent rendering will be deferred until the popover is open.
Type
boolean
Default
false
Description
The lazy behavior of popover's content when not visible. Only works when lazy={true}
- unmount
: The popover's content is always unmounted when not open.
- keepMounted
: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyMode
Default
'unmount'
Description
If true
, the popper will match the width of the reference at all times.
It's useful for autocomplete
, date-picker
and select
patterns.
Type
boolean
Default
false
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]
Docs
https://popper.js.org/docs/v2/modifiers/Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]
Description
Callback fired when the popover closes.
Type
() => void
Description
Callback fired when the popover opens.
Type
() => void
Description
If true
, the popover will be opened.
Type
boolean
Description
The number of delay time to open.
Type
number
Default
200
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>
Default
'bottom'
Description
If true
, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
boolean
Default
true
Description
The CSS positioning strategy to use.
Type
"absolute" | "fixed"
Default
'absolute'
Description
The animation of the popover.
Type
"bottom" | "left" | "none" | "right" | "scale" | "top"
Default
'scale'
Description
If true
, focus will be transferred to the first interactive element when the popover opens.
Type
boolean
Default
true
Description
The boundary area for the popper. Used within the preventOverflow
modifier.
Type
"clippingParents" | "scrollParent" | HTMLElement
Default
'clippingParents'
Description
The number of delay time to close.
Type
number
Default
200
Description
If true
, the popover will close when you blur out it by clicking outside or tabbing out.
Type
boolean
Default
true
Description
If true
, display the popover close button.
Type
boolean
Default
true
Description
If true
, the popover will close when you hit the Esc
key.
Type
boolean
Default
true
Description
If true
, the popover will be initially opened.
Deprecated
Use defaultOpen
instead
Type
boolean
Description
If true
, the popover will be initially opened.
Type
boolean
Description
The animation duration.
Type
number | MotionLifecycleProps<number>
Description
If provided, determines whether the popper will reposition itself on scroll
and resize
of the window.
Type
type ONLY_FOR_FORMAT =
| boolean
| { resize?: boolean | undefined; scroll?: boolean | undefined }
Default
true
Description
If true
, the popper will change its placement and flip when it's about to overflow its boundary area.
Type
boolean
Default
true
Description
The distance or margin between the reference and popper.
It is used internally to create an offset
modifier.
Type
UIValue<number>
Default
8
Description
The ref
of the element that should receive focus when the popover opens.
Type
RefObject<{ focus(): void }>
Description
If true
, the PopoverContent rendering will be deferred until the popover is open.
Deprecated
Use lazy
instead
Type
boolean
Default
false
Description
If true
, the popover will be opened.
Deprecated
Use open
instead
Type
boolean
Description
If true
, the PopoverContent rendering will be deferred until the popover is open.
Type
boolean
Default
false
Description
The lazy behavior of popover's content when not visible. Only works when lazy={true}
- unmount
: The popover's content is always unmounted when not open.
- keepMounted
: The popover's content initially unmounted, but stays mounted when popover is open.
Type
LazyMode
Default
'unmount'
Description
If true
, the popper will match the width of the reference at all times.
It's useful for autocomplete
, date-picker
and select
patterns.
Type
boolean
Default
false
Description
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass.
Type
Partial<Modifier<string, any>>[]
Docs
https://popper.js.org/docs/v2/modifiers/Description
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]
Description
Callback fired when the popover closes.
Type
() => void
Description
Callback fired when the popover opens.
Type
() => void
Description
If true
, the popover will be opened.
Type
boolean
Description
The number of delay time to open.
Type
number
Default
200
Description
The placement of the popper relative to its reference.
Type
UIValue<Placement>
Default
'bottom'
Description
If true
, will prevent the popper from being cut off and ensure it's visible within the boundary area.
Type
boolean
Default
true
Description
The ref
of the element related to the popover.
This is used during the onBlur
event.
Type
RefObject<HTMLElement>
Description
If true
, focus will be returned to the element that triggers the popover when it closes.
Type
boolean
Default
true
Description
The CSS positioning strategy to use.
Type
"absolute" | "fixed"
Default
'absolute'
Description
The interaction that triggers the popover.
- hover
: means the popover will open when you hover with mouse or focus with keyboard on the popover trigger.
- click
: means the popover will open on click or press Enter
to Space
on keyboard.
Type
"click" | "contextmenu" | "hover" | "never"
Default
'click'
Description
If true
, disable ripple effects when pressing a element.
Type
boolean
Default
false
Description
If true
, the button is disabled.
Deprecated
Use disabled
instead.
Type
boolean
Default
false
Description
If true, the button is full rounded.
Type
boolean
Default
false
Description
The HTML element to render.
Type
keyof ReactDOM
Description
The props of the container element.
Type
Omit<HTMLUIProps, "children">
Edit this page on GitHub