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.

Usage

Code

Accessibility

Show more information

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

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.

Interactive example