Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

Popover

Popover is a component that floats around an element to display information.

Source@yamada-ui/popover

Props

ComboBoxProps

animation

Description

The animation of the popover.

Type

"bottom" | "left" | "none" | "right" | "scale" | "top"

Default

'scale'

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier.

Type

"clippingParents" | "scrollParent" | HTMLElement

Default

'clippingParents'

closeDelay

Description

The number of delay time to close.

Type

number

Default

200

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out.

Type

boolean

Default

true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key.

Type

boolean

Default

true

defaultIsOpen

Deprecated

Description

If true, the popover will be initially opened.

Deprecated

Use defaultOpen instead

Type

boolean

defaultOpen

Description

If true, the popover will be initially opened.

Type

boolean

duration

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

eventListeners

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

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type

boolean

Default

true

gutter

Description

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

Type

UIValue<number>

Default

8

isLazy

Deprecated

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Deprecated

Use lazy instead

Type

boolean

Default

false

isOpen

Deprecated

Description

If true, the popover will be opened.

Deprecated

Use open instead

Type

boolean

lazy

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Type

boolean

Default

false

lazyBehavior

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'

matchWidth

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

modifiers

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/

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type

[number, number]

onClose

Description

Callback fired when the popover closes.

Type

() => void

onOpen

Description

Callback fired when the popover opens.

Type

() => void

open

Description

If true, the popover will be opened.

Type

boolean

openDelay

Description

The number of delay time to open.

Type

number

Default

200

placement

Description

The placement of the popper relative to its reference.

Type

UIValue<Placement>

Default

'bottom'

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type

boolean

Default

true

strategy

Description

The CSS positioning strategy to use.

Type

"absolute" | "fixed"

Default

'absolute'

PopoverProps

animation

Description

The animation of the popover.

Type

"bottom" | "left" | "none" | "right" | "scale" | "top"

Default

'scale'

autoFocus

Description

If true, focus will be transferred to the first interactive element when the popover opens.

Type

boolean

Default

true

boundary

Description

The boundary area for the popper. Used within the preventOverflow modifier.

Type

"clippingParents" | "scrollParent" | HTMLElement

Default

'clippingParents'

closeDelay

Description

The number of delay time to close.

Type

number

Default

200

closeOnBlur

Description

If true, the popover will close when you blur out it by clicking outside or tabbing out.

Type

boolean

Default

true

closeOnButton

Description

If true, display the popover close button.

Type

boolean

Default

true

closeOnEsc

Description

If true, the popover will close when you hit the Esc key.

Type

boolean

Default

true

defaultIsOpen

Deprecated

Description

If true, the popover will be initially opened.

Deprecated

Use defaultOpen instead

Type

boolean

defaultOpen

Description

If true, the popover will be initially opened.

Type

boolean

duration

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

eventListeners

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

flip

Description

If true, the popper will change its placement and flip when it's about to overflow its boundary area.

Type

boolean

Default

true

gutter

Description

The distance or margin between the reference and popper. It is used internally to create an offset modifier.

Type

UIValue<number>

Default

8

initialFocusRef

Description

The ref of the element that should receive focus when the popover opens.

Type

RefObject<{ focus(): void }>

isLazy

Deprecated

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Deprecated

Use lazy instead

Type

boolean

Default

false

isOpen

Deprecated

Description

If true, the popover will be opened.

Deprecated

Use open instead

Type

boolean

lazy

Description

If true, the PopoverContent rendering will be deferred until the popover is open.

Type

boolean

Default

false

lazyBehavior

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'

matchWidth

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

offset

Description

The main and cross-axis offset to displace popper element from its reference element.

Type

[number, number]

onClose

Description

Callback fired when the popover closes.

Type

() => void

onOpen

Description

Callback fired when the popover opens.

Type

() => void

open

Description

If true, the popover will be opened.

Type

boolean

openDelay

Description

The number of delay time to open.

Type

number

Default

200

placement

Description

The placement of the popper relative to its reference.

Type

UIValue<Placement>

Default

'bottom'

preventOverflow

Description

If true, will prevent the popper from being cut off and ensure it's visible within the boundary area.

Type

boolean

Default

true

relatedRef

Description

The ref of the element related to the popover. This is used during the onBlur event.

Type

RefObject<HTMLElement>

restoreFocus

Description

If true, focus will be returned to the element that triggers the popover when it closes.

Type

boolean

Default

true

strategy

Description

The CSS positioning strategy to use.

Type

"absolute" | "fixed"

Default

'absolute'

trigger

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'

PopoverBodyProps

PopoverCloseButtonProps

disableRipple

Description

If true, disable ripple effects when pressing a element.

Type

boolean

Default

false

fullRounded

Description

If true, the button is full rounded.

Type

boolean

Default

false

isDisabled

Deprecated

Description

If true, the button is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

isRounded

Deprecated

Description

If true, the button is full rounded.

Deprecated

Use fullRounded instead.

Type

boolean

Default

false

PopoverContentProps

as

Description

The HTML element to render.

Type

keyof IntrinsicElements

containerProps

Description

The props of the container element.

Type

Omit<HTMLUIProps, "children">

PopoverFooterProps

PopoverHeaderProps

Edit this page on GitHub

PreviousActionBarNextTooltip