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.


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. Note that attributes are passed by the component itself they get destructured in the children function ({ attributes }).

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.


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.


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.


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.


idstring-falseCustom id override
positiontop, top-start, top-end, bottom, bottom-start, bottom-end, start, end-false
onOpen() => {}-false
onClose() => {}-false
widthfull, string, number-false
activeboolean, null-false
triggerTypeclick, hoverclickfalse
trapFocusModedialog, action-menu, content-menudialogfalse