Popover

Popover displays rich content triggered by an interactive element.
Works with any type of content
Can be controlled and uncontrolled
Automatically traps focus when opened and supports multiple focus management modes
Automatically fits the popover into the viewport or locks it to the position value you provide
Full keyboard navigation
Supports custom width
Supports custom trigger element rendering
Supports hover and click trigger events
Similar components:
Dropdown MenuTooltipSelect


Usage

Popovers can be added to any interactive element on the page by passing attributes to it and adding the content you want to render.

Popovers are shown by clicking an action element but you can customize that using triggerType property.

Positioning

You can define the position you want Popover to be displayed at. However, if it doesn't fit into the screen, it will automatically pick a better position that stays within the viewport.

In case you want to ignore the the viewport boundaries and always show Popover using a specific position value, you can lock it with a forcePosition property. This can be useful when using Popover to build dropdown menus.

Composition

You can control the width of the Popover with the width property. You can either pass a specific px or percent value. That includes using css variables for defining the size.

Popover comes with a default padding in its content area and you can customize it with padding property. For example, you can completely remove it with padding set to 0.

In case you need to add a close button to the Popover content, you can use it together with Dismissible utility.

Accessibility

  • It's important to pass the attributes provided by the Popover component to your interactive trigger component. That way you will ensure that all the user events and aria attributes are assigned correctly.

  • Popover traps the focus in its content area, but you can control the way it's applied with the trapFocusMode property. By default, it applies a regular focus trap with the Tab key navigation enabled. However, you can switch it to action-menu or content-menu modes to make work it like listbox or regular content area with links.

Properties

NameTypeDefaultRequiredComment
idstring-falseCustom id override
positiontop, top-start, top-end, bottom, bottom-start, bottom-end, start, end-false
forcePositionboolean-false
onOpen() => {}-false
onClose() => {}-false
widthstring-false
activeboolean, null-false
defaultActiveboolean-false
triggerTypeclick, hoverclickfalse
childrenReactNode-false
paddingnumber-falseCustom padding override
trapFocusModedialog, action-menu, content-menudialogfalse
Previous