Popover
Popover displays rich content triggered by an interactive element.

For displaying menus, check DropdownMenu component which is a more high-level implementation of Popover. For other ways of displaying content related content, you may consider using Tooltip or Modal.

Usage

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

By default, Popovers are shown on click but you can customize that using triggerType property. Changing it to hover will also remove the close button from the Popover.

Positioning

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

Since Arcade components are built to work with RTL, left and right directions are called start and end instead. This includes the values of the position property as you may see in the previous example.

In case you want to ensure Popover is displayed using a specific position value, you can force its value using forcePosition property. This can be useful when using Popover to build dropdown menus.

Layout

Depending on the content type, you can control the width of the Popover with the width property. You can either pass a specific value or make it full width, for instance on mobile screens. Width supports both, numbers and strings, which means that you can use theme css variables.

By default, Popover has a padding in its content area but sometimes you may need to make the content full width. It's possible to remove the padding with the padded property.

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 Tooltip 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 navigation enabled. However, you can switch it to action-menu or content-menu modes to make work it like listbox or menu 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, number-false
activeboolean, null-false
defaultActiveboolean-false
triggerTypeclick, hoverclickfalse
childrenReactNode-false
paddedbooleantruefalse
trapFocusModedialog, action-menu, content-menudialogfalse