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

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.
Interactive example