Popover

Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

Storybook @nextui-org/popover React Aria Source Styles source

Installation

nextui add popover

No need to install this package if @nextui-org/react is already installed globally.

Import

NextUI exports 3 popover-related components:

Popover: The main component to display a popover.
PopoverTrigger: The component that triggers the popover.
PopoverContent: The component that contains the popover content.

To be sure that the popover exposes the correct title to assistive technologies, you should use the titleProps prop on the PopoverContent component. To use this prop, you must pass a function as a child.

With Form

The Popover handles the focus within the popover content. It means that you can use the popover with form elements without any problem. the focus returns to the trigger when the popover closes.

Note: You can add the autoFocus prop to the first Input component to focus it when the popover opens.

Backdrop

The Popover component has a backdrop prop to show a backdrop behind the popover. The backdrop can be either transparent, opaque or blur. The default value is transparent.

Custom Motion

Popover offers a motionProps property to customize the enter / exit animation.

Learn more about Framer motion variants here.

Custom Trigger

Slots

base: The main popover slot, it wraps the popover content and contains the arrow as a pseudo-element (::before).
trigger: The popover trigger slot, it has small styles to ensure the trigger works correctly.
backdrop: The backdrop slot, it contains the backdrop styles.
content: The content slot, it contains the popover content.

Custom Styles

You can customize the Popover component by passing custom Tailwind CSS classes to the component slots.

Data Attributes

Popover has the following attributes on the PopoverContent element:

data-open: When the popover is open. Based on popover state.
data-placement: The placement of the popover. Based on placement prop. The arrow element is positioned based on this attribute.
data-focus: When the popover is being focused. Based on useFocusRing.
data-focus-visible: When the popover is being focused with the keyboard. Based on useFocusRing.

Accessibility

The trigger and popover are automatically associated semantically via ARIA.
Content outside the popover is hidden from assistive technologies while it is open.
The popover closes when interacting outside, or pressing the Escape key.
Focus is moved into the popover on mount, and restored to the trigger element on unmount.
The popover is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.
Scrolling is prevented outside the popover to avoid unintentionally repositioning or closing it.

API

Attribute	Type	Description	Default
children*	`ReactNode[]`	The content of the popover. It's usually the `PopoverTrigger` and `PopoverContent`.	-
size	`sm` \| `md` \| `lg`	The popover content font size.	`md`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	The popover color theme.	`default`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	The popover border radius.	`lg`
shadow	`none` \| `sm` \| `md` \| `lg`	The popover shadow.	`lg`
backdrop	`transparent` \| `opaque` \| `blur`	The popover backdrop type.	`transparent`
placement	PopoverPlacement	The placement of the popover relative to its trigger reference.	`bottom`
state	`OverlayTriggerState`	The controlled state of the popover. See Overlay States	-
isOpen	`boolean`	Whether the popover is open by default (controlled).	-
defaultOpen	`boolean`	Whether the popover is open by default (uncontrolled).	-
offset(px)	`number`	The distance or margin between the reference and popper. It is used internally to create an offset modifier.	`7`
containerPadding(px)	`number`	The placement padding that should be applied between the element and its surrounding container.	`12`
crossOffset(px)	`number`	The additional offset applied along the cross axis between the element and its anchor element.	`0`
triggerType	`dialog` \| `menu` \| `listbox` \| `tree` \| `grid`;	Type of popover that is opened by the trigger.	`dialog`
showArrow	`boolean`	Whether the popover should have an arrow.	`false`
shouldFlip	`boolean`	Whether the popover should change its placement and flip when it's about to overflow its boundary area.	`true`
triggerScaleOnOpen	`boolean`	Whether the trigger should scale down when the popover is open.	`true`
shouldBlockScroll	`boolean`	Whether to block scrolling outside the popover.	`false`
isKeyboardDismissDisabled	`boolean`	Whether pressing the escape key to close the popover should be disabled.	`false`
shouldCloseOnBlur	`boolean`	Whether the popover should close when focus is lost or moves outside it.	`false`
motionProps	MotionProps	The props to modify the framer motion animation. Use the `variants` API to create your own animation.
portalContainer	`HTMLElement`	The container element in which the overlay portal will be placed.	`document.body`
updatePositionDeps	`any[]`	The dependencies to force the popover position update.	`[]`
triggerRef	`RefObject<HTMLElement>`	The ref for the element which the popover positions itself with respect to.	-
scrollRef	`RefObject<HTMLElement>`	A ref for the scrollable region within the popover.	`overlayRef`
disableAnimation	`boolean`	Whether the popover is animated.	`false`
classNames	`Record<"base"｜ "trigger"｜ "backdrop"｜ "content", string>`	Allows to set custom class names for the popover slots.	-

Attribute	Type	Description
onOpenChange	`(isOpen: boolean) => void`	Handler that is called when the popover's open state changes.
shouldCloseOnInteractOutside	`(e: HTMLElement) => void`	When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the overlay ref.
onClose	`() => void`	Handler that is called when the popover should close.

PopoverTrigger Props

Attribute	Type	Description	Default
children*	`ReactNode`	The popover trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility.	-

PopoverContent Props

Attribute	Type	Description	Default
children	`ReactNode`	The content that is displayed when the trigger is pressed.	-

type PopoverPlacement =
  | "top"
  | "bottom"
  | "right"
  | "left"
  | "top-start"
  | "top-end"
  | "bottom-start"
  | "bottom-end"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end";

Motion Props

export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/

Popover

Installation

Import

Usage

With Arrow

Colors

Placements

Offset

Controlled

Title Props