Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
A popover displays content on top of other content.
trapFocus prop when focusable elements are in the Popover.Popovers as separate components.Popover to reduce screen clutter to host non-essential information.Popovers.Popovers to display too much content, consider if that content should be on the main page.| Name | Description | Default | Control |
|---|---|---|---|
| positioning | Configures the position of the Popover PositioningShorthand | - | - |
| defaultOpen | Used to set the initial open state of the Popover in uncontrolled mode boolean | - | - |
| mountNode | Where the portal children are mounted on DOM HTMLDivElement | - | - |
| open | Controls the opening of the Popover boolean | - | |
| onOpenChange | Call back when the component requests to change value
The ((e: OpenPopoverEvents, data: OnOpenChangeData) => void) | - | - |
| openOnHover | Flag to open the Popover by hovering the trigger boolean | - | |
| openOnContext | Flag to open the Popover as a context menu. Disables all other interactions boolean | - | |
| noArrow | Do not display the arrow boolean | - | |
| size | Determines popover padding and arrow size "small""medium""large" | "medium" | |
| appearance | A popover can appear styled with brand or inverted. When not specified, the default style is used. "brand""inverted" | - | |
| trapFocus | Should trap focus boolean | - | |
| children | Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.
Alternatively can only contain {@link PopoverSurface} if using a custom (Element | [Element, Element]) & ReactNode | - |
When a Popover contains focusable elements, the modal dialog pattern will apply. By using the trapFocus
prop, the component sets aria-hiddenappropriately to parent elements in the document so that elements
not contained in the focus trap are hidden to screen reader users. This focus trap is automatically removed
when the Popover is closed.
The opening and close of the Popover can be controlled with your own state.
The onOpenChange callback will provide the hints for the state and triggers based on the appropriate
event.
When controlling the open state of the Popover, extra effort is required to ensure that interactions are
still appropriate and that keyboard accessibility does not degrade.
Popovers can be nested within each other. Too much nesting can result in extra accessibility considerations and are generally not a great user experience,
Since nested popovers will generally have an interactive PopoverTrigger to control
the nested popover, make sure to combine their usage with the trapFocus prop for correct
screen reader and keyboard accessibility.
trapFocus when nesting.A Popover can be used without a trigger and anchored to any DOM element. This can be useful if a Popover instance needs to be reused in different places.
Not using a PopoverTrigger will require more work to make sure your scenario is accessible, such as, implementing accessible markup and keyboard interactions for your trigger.
Native elements and Fluent components have first class support as children of PopoverTrigger
so they will be injected automatically with the correct props for interactions and accessibility attributes.
It is possible to use your own custom React component as a child of PopoverTrigger. These components should
use ref forwarding with React.forwardRef