Popover

Popover is a small floating window that displays information or actions related to a specific element. It is triggered by buttons or links and appears when the user clicks or hovers over them.

Popover follows the WAI-ARIA - Dialog (Modal) Pattern for accessibility.

When the Popover opens, focus is trapped within it. That is, you cannot focus on elements outside the popover unless the popper is closed.

Key	Description	State
`Tab`	Focuses the next element within the popover that is not disabled. If it's the first element, the popover is closed.	`isOpen={true}`
`Shift` + `Tab`	Focuses the next element within the popover that is not disabled. If it's the first element, the popover is closed.	`isOpen={true}`
`Escape`	Closes the popover.	`isOpen={true}` + `closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`PopoverContent`	`role="dialog"`	Indicates that it is a dialog.
	`aria-labelledby`	Sets the `id` of the associated `PopoverHeader`.
	`aria-describedby`	Sets the `id` of the associated `PopoverBody`.
	`aria-hidden`	Sets to `"true"` when popover is opened, and `"false"` when it is closed.
`PopoverTrigger`	`role="button"`	Indicates that it is a button.
	`aria-expanded`	Sets to `"true"` when popover is opened, and `"false"` when it is closed.
	`aria-controls`	Set to `PopoverContent`'s id when popover is opened, and undefined when it is closed.
`PopoverCloseButton`	`aria-label="Close popover"`	Sets `"Close popover"` as the label.
	`aria-controls`	Sets the `id` of `PopoverContent`.
`PopoverHeader`	`id`	Used to associate with `PopoverContent`.
`PopoverBody`	`id`	Used to associate with `PopoverContent`.

Edit this page on GitHub

PreviousActionBar NextTooltip