Popover
A popover is a layer that pops up over all other elements on a page. It’s like a little information bubble that pops up near the anchor element to provide more related additional content.
Assigned to
John Smith
Class
2a
Due
March 10, 2024
<sl-button id="anchor" popovertarget="popover-1">Show more information</sl-button>
<sl-popover id="popover-1" anchor="anchor" aria-label="More information about John">
<header>Project Overview <sl-button autofocus>...</sl-button></header>
<hr>
<section>
Assigned to...
</section>
</sl-popover>When to use
Additional Information
When you want to provide more context or detailed information about an element.
Interactive Elements
Use popovers for actions or interactions related to an element. For instance, a scenario where a user hovers over an image thumbnail. A popover could appear, displaying additional details about the image, such as its title, description, and tags.
When not to use
Brief tips or hints
Avoid using popovers for brief tips or hints, use a tooltip instead. Popovers go beyond hints and can include detailed information. Popovers can be more verbose, with headers and multiple lines of text. They may even contain buttons or other interactive elements.
Long content or many interactions
If your popover content becomes too lengthy or contains many interactions, it’s better to switch to a dialog or a separate page. Popovers are designed for concise information, so when complexity increases, consider alternative UI patterns.
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Pointer | Directs user’s attention to the source element that triggered the popover. | no |
| 3 | Container | Area for text, images, links, and other content. | no |
Figma Options
With these options, you can tweak the appearance of the popover in Figma. They are available in the Design Panel so you can compose the popover to exactly fit the user experience need for the use case you are working on.
| Item | Options | Description |
|---|---|---|
| Position | 1-o'clock 2-o'clock 3-o'clock 4-o'clock 5-o'clock 6-o'clock 7-o'clock 8-o'clock 9-o'clock 10-o'clock 11-o'clock 12-o'clock | To indicate the position of the pointer. The popover is always positioned so that this arrow is always closest to the element that triggered the popover. |
| Container | slot component | To select the content you want to show within the container. |
<sl-button id="my-btn" popovertarget="popover-2">More details...</sl-button>
<sl-popover id="popover-2" anchor="my-btn" position="bottom-start" aria-label="Information about the student...">
<header>
<sl-avatar display-name="John Smith">Primary school</sl-avatar>
<sl-button aria-label="Close the popover" autofocus>
<sl-icon name="xmark"></sl-icon>
</sl-button>
</header>
<hr>
<section>
Da Vinci...
</section>
</sl-popover>Opening / closing
The sl-popover component uses 'popover' attribute and can be shown/hidden using native Popover API methods like:
| Name | Description |
|---|---|
hidePopover() | Hides a popover element by removing it from the top layer and styling it with display: none. |
showPopover() | Shows a popover element by adding it to the top layer. |
togglePopover() | Toggles a popover element between the showing and hidden states. |
More information you can find on the MDN page about the Popover API.
API
The popover component offers settings for various scenarios.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
noDescribedby | no-describedby | boolean | undefined | When the contents of your popover is too long to be read inline this should be set to true so the user can navigate to the popover content themselves. `aria-details` is always set, regardless of this property. Read more about this in the [accessibility documentation](https://sanomalearning.design/categories/components/popover/accessibility/). | |
position | position | 'top' | 'right' | 'bottom' | 'left' | AlignedPlacement | undefined | 'bottom' | The position of popover relative to its anchor. |
Slots
| Name | Description |
|---|---|
default | Body content for the popover |
CSS Parts
| Name | Description |
|---|---|
container | The container for the popover |
Keyboard interactions
Here's an overview of the common keyboard interactions associated with a popover:
| Command | Description |
|---|---|
Tab | When the popover is opened, focus moves into the popover container to the first focusable element to navigate elements inside. |
Esc | Closes the popover. |
Screen readers
The support for popovers differs in screen readers and other assistive technology. Therefore, it is essential to be critical when designing an interaction with a popover and only use it when there is genuinely no space in the main page. Alternatively, ensure that you provide additional accessibility support and thoroughly test it. When there is a lot going on in your popover, consider using a dialog instead.
When the popover contains plain text content (with no HTML markup), the element that triggers the popover — for example, a button — receives an aria-describedby attribute that points to the popover. This allows the screen reader to read out the text of the popover when the button is focused by the screen reader and the popover is opened. This approach is specifically for plain text because all the content of the popover gets concatenated into one string and is read as a single long piece of text without any way to interact with the content.
If you have a large piece of text in the popover, you can set the no-describedby attribute, and the connection won’t be made automatically. This way, the user can navigate to and from the description themselves.
Some screen readers have a functionality that lets the user “jump” to the element referred to by aria-details (which is set on all triggers and popovers automatically). Unfortunately, not all readers support this feature. Therefore, it’s crucial to always place the popover immediately after the element that triggers it. This ensures that it comes next in the page flow, allowing users to find it promptly.
WAI-ARIA
WAI-ARIA Roles, States, and Properties for a popover provide essential information to assistive technologies and screen readers. They convey the popovers's role, state, and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.
| Attribute | Value | Description | User supplied |
|---|---|---|---|
aria-expanded | boolean | Set to true (on the anchor element) if the popover is visible, false if the popover is hidden. | no |
aria-details | string | Used to link the popover element with the anchor (element that triggers the popover component). It contains id of the popover element and is added to the anchor element. | no |
aria-label | string | Can be used to describe the popover content/purpose. | yes |
aria-labelledby | string | Used to connect (by id) with single header/element inside a popover that describes the popover. | yes |