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. Popover implementation is based on @react-aria/overlays.

import { Popover } from '@nextui-org/react';

Anatomy

Popover: The wrapper that provides props, state, and context to its children.
Popover.Trigger: Used to wrap the reference (or trigger) element.
Popover.Content: The content that is displayed when the trigger is clicked.

Default

Shows how to build a typical popover overlay that is positioned relative to a trigger button.

The Popover can be closed by clicking or interacting outside the popover, or by pressing the Escape key. When the popover is closed, focus is restored back to its trigger button.

Bordered

You can change the full style to a bordered Popover with the isBordered property.

Placements

Positions the popover relative to the trigger button. The position is automatically adjusted when the Popover is likely to be offscreen or when the window is resized.

The Popover is automatically hidden when the user scroll the page.

Controlled vs Uncontrolled

The defaultOpen prop can be used to set the default state (uncontrolled). Alternatively, the isOpen prop can be used to make the selected state controlled.

Note: See React's documentation on uncontrolled components for more info.

Custom Content

The Popover.Content can be used to render any component you want. Ensure the children passed to Popover.Trigger is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility.

A11y: When Popover opens, focus is sent to PopoverContent. When it closes, focus is returned to the trigger.

Disable animation

Disables the animation of the popover when it is opened or closed.

APIs

Attribute	Type	Description	Default
children*	`ReactNode[]`	The content of the popover. It's usually the `Popover.Trigger` and `Popover.Content`.	-
placement	PopoverPlacement	The placement of the popover relative to its trigger reference.	`bottom`
triggerType	TriggerType	Type of overlay that is opened by the trigger.	`dialog`
shouldFlip	`boolean`	Whether the popover should change its placement and flip when it's about to overflow its boundary area.	`true`
offset(px)	`number`	The distance or margin between the reference and popper. It is used internally to create an offset modifier.	`12`
isOpen	`boolean`	Whether the overlay is open by default (controlled).	-
isBordered	`boolean`	Whether the overlay should have a border.	`false`
borderWeight	NormalWeights	The border weight of the bordered overlay.	`light`
defaultOpen	`boolean`	Whether the overlay is open by default (uncontrolled).	-
isDismissable	`boolean`	Whether to close the overlay when the user interacts outside it.	`true`
disableShadow	`boolean`	Whether to disable the shadow.	`false`
isKeyboardDismissDisabled	`boolean`	Whether pressing the escape key to close the overlay should be disabled.	`false`
shouldCloseOnBlur	`boolean`	Whether the overlay should close when focus is lost or moves outside it.	`false`
disableAnimation	`boolean`	Whether the popover is animated.	`false`
triggerRef	`RefObject<HTMLElement>`	The ref for the element which the overlay positions itself with respect to.	-
scrollRef	`RefObject<HTMLElement>`	A ref for the scrollable region within the overlay.	`overlayRef`

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

Popover.Trigger 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.	-

Popover.Content Props

Attribute	Type	Description	Default
children	`ReactNode`	The content that is displayed when the trigger is clicked.	-
css	`Stitches.CSS`	Override Default CSS style.	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs.	`div`
...	`HTMLDivElement`	Native element props.	-

type PopoverPlacement =
  | 'bottom'
  | 'bottom-left'
  | 'bottom-right'
  | 'top'
  | 'top-left'
  | 'top-right'
  | 'left'
  | 'left-top'
  | 'left-bottom'
  | 'right'
  | 'right-top'
  | 'right-bottom';

Trigger Type

type TriggerType = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';

Normal Weights

type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';

Radio Tooltip

Created by Junior Garcia

Deployed on

Documentation