All things Popover
Components
Examples
Lazy PopoverLazy loading Popover using React.lazy and React.useTransition to avoid downloading additional code until the user interacts with the button.
Responsive PopoverOverwriting the default Popover positioning styles on small screens using the updatePosition prop.
Selection PopoverShowing an inline Popover when a text is selected. This example uses the getAnchorRect prop to position the flyout relative to the selected text.
Standalone PopoverAbstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop to determine the position of the popup.
API Reference
usePopoverContextReturns the popover store from the nearest popover container.
usePopoverStoreCreates a popover store to control the state of
Popover components.
PopoverRenders a popover element that's automatically positioned relative to an
anchor element.
PopoverAnchorRenders an element that acts as the anchor for the popover. The
Popover component will be
positioned in relation to this element.
PopoverArrowRenders an arrow inside a Popover
component pointing to the anchor element.
PopoverDescriptionRenders a description in a popover. This component must be wrapped with
Popover so the aria-describedby
prop is properly set on the popover element.
PopoverDisclosureRenders a button that controls the visibility of the
Popover component when clicked.
PopoverDisclosureArrowRenders an arrow pointing to the popover position. It's usually rendered
inside the
PopoverDisclosure
component.
PopoverDismissRenders a button that hides a
Popover component when clicked.
PopoverHeadingRenders a heading in a popover. This component must be wrapped with
Popover so the aria-labelledby
prop is properly set on the popover element.
PopoverProviderProvides a popover store to Popover
components.