Popover Preview

A popover is a small surface that appears when someone interacts with a component to give nonessential, contextual information without blocking them.

Popovers can have structured content and interactive components. If you need to show a more complex layout or block the page behind, try a dialog. For unstructured plain text, try a tooltip.

Loading...
Open in CodeSandbox
Popover storybook
React guidance

Properties

appearance

A popover can appear styled with brand or inverted. When not specified, the default style is used.

“brand” “inverted”
Default:
none

children

Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}. Alternatively can only contain {@link PopoverSurface} if using a custom target .

(Element | [Element, Element]) & ReactNode
Default:
none

closeOnScroll

Close when scroll outside of it

boolean
Default:
false

defaultOpen

Used to set the initial open state of the Popover in uncontrolled mode

boolean
Default:
false

inertTrapFocus

Enables standard behavior according to the HTML dialog spec where the focus trap involves setting outside elements inert, making navigation leak from the trapped area back to the browser toolbar and vice-versa.

boolean
Default:
false

inline

Popovers are rendered out of DOM order on document.body by default, use this to render the popover in DOM order

boolean
Default:
false

legacyTrapFocus

Must be used with the trapFocus prop Enables older Fluent UI focus trap behavior where the user cannot tab into the window outside of the document. This is now non-standard behavior according to the HTML dialog spec where the focus trap involves setting outside elements inert.

boolean
Default:
none

mountNode

Where the portal children are mounted on DOM

HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined
Default:
a new element on document.body without any styling

mouseLeaveDelay

Sets the delay for closing popover on mouse leave

number
Default:
none

onOpenChange

Call back when the component requests to change value The open value is used as a hint when directly controlling the component

((e: OpenPopoverEvents, data: OnOpenChangeData) => void)
Default:
none

open

Controls the opening of the Popover

boolean
Default:
false

openOnContext

Flag to open the Popover as a context menu. Disables all other interactions

boolean
Default:
false

openOnHover

Flag to open the Popover by hovering the trigger

boolean
Default:
false

positioning

Configures the position of the Popover

PositioningShorthand
Default:
none

size

Determines popover padding and arrow size

“small” “medium” “large”
Default:
“medium”

trapFocus

Should trap focus

boolean
Default:
false

unstable_disableAutoFocus

By default Popover focuses the first focusable element in PopoverSurface on open. Specify disableAutoFocus to prevent this behavior.

boolean
Default:
false

withArrow

Display an arrow pointing to the target.

boolean
Default:
false