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.

UsageCodeAccessibility
Show more information
Project Overview

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

ItemNameDescriptionOptional
1PointerDirects user’s attention to the source element that triggered the popover.no
3ContainerArea 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.

ItemOptionsDescription
Position1-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'clockTo 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.
Containerslot componentTo select the content you want to show within the container.
More details about the student
Primary school

Da Vinci International School

Class 2a

john.smith@primaryschool.org

<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:

NameDescription
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

NameAttributeTypeDefaultDescription
noDescribedbyno-describedbyboolean | undefinedWhen 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 on the accessibility tab.
positionposition'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end''bottom'The position of popover relative to its anchor.

Slots

NameDescription
defaultBody content for the popover

CSS Parts

NameDescription
containerThe container for the popover

Keyboard interactions

Here's an overview of the common keyboard interactions associated with a popover:

CommandDescription
TabWhen the popover is opened, focus moves into the popover container to the first focusable element to navigate elements inside.
EscCloses 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.

Specifies whether the attribute is always set in the component (no) or it can be provided by the developer (yes)

AttributeValueDescriptionUser supplied
aria-expandedbooleanSet to true (on the anchor element) if the popover is visible, false if the popover is hidden.no
aria-detailsstringUsed 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-labelstringCan be used to describe the popover content/purpose.yes
aria-labelledbystringUsed to connect (by id) with single header/element inside a popover that describes the popover.yes
Interactive example