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

More details about the student

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

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

Interactive example