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.
PopoverRenders a popover element.
PopoverAnchorRenders an element that will serve as the popover's anchor. The popover will
be positioned relative to this element.
PopoverArrowRenders an arrow inside a Popover
component.
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 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.