Component Blueprints

Popovers

  • HTML/CSS:Dev Ready
  • Layout:Desktop Only

Sections

A popover is a non-modal dialog. The component should be paired with a clickable trigger element and contain at least one focusable element.

About Popovers#

A popover is used to display contextual information to the user.

A popover can accept the following nubbin position classes, .slds-nubbin_left, .slds-nubbin_left-top, .slds-nubbin_left-bottom, .slds-nubbin_top-left, .slds-nubbin_top-right, .slds-nubbin_right-top, .slds-nubbin_right-bottom, .slds-nubbin_bottom-left, .slds-nubbin_bottom-right.

Accessibility#

Notable features#

  • Popovers must come with a triggering button
  • They must have at least one focusable element inside
  • They should be implemented as a keyboard focus trap
  • When triggered, user focus should be placed on the first focusable element that isn't the close button. If the close button is the only focusable element, focus should be placed there
  • Pressing the Escape the key as well as clicking the close button should close the Popover
  • User focus should be placed back on the triggering button when the popover is closed

Panel Popovers can be shown on mouse hover but for keyboard or screen reader users, a button should be present in addition and next to the hover trigger. This is due to the focus moving and trapping nature of non-modal dialogs. You should not move a user's focus without their expressed intent.

Notable attributes#

  • The Popover element should have role="dialog" applied
  • The dialog should be labelled, this can be achieved in two ways:
    • Apply the aria-labelledby attribute to the dialog element and set the value to be the ID of the main Heading element in the Popover (if it provides a good and meaningful title to the dialog)
    • If no Heading element is present, use the aria-label attribute and set the value to be a meaningful title of the dialog
  • The dialog should be described where possible. This can be achieved by applying the aria-describedby attribute to the dialog element and set the value to be the id of the Popover body
  • The triggering element must have aria-haspopup="true" when the popover is opened and aria-haspopup="false" when the popover is closed

Base#

<section aria-describedby="dialog-body-id-3" aria-label="Dialog Title" class="slds-popover slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With Header#

<section aria-describedby="dialog-body-id-6" aria-labelledby="dialog-heading-id-11" class="slds-popover slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-9" aria-label="Dialog Title" class="slds-popover slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With Badge#

<section aria-describedby="dialog-body-id-12" aria-labelledby="dialog-heading-id-17" class="slds-popover slds-nubbin_left slds-popover_large" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Scrolling region with max-height#

<section aria-describedby="dialog-body-id-15" aria-labelledby="dialog-heading-id-20" class="slds-popover slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Widths#

Small#

<section aria-describedby="dialog-body-id-18" aria-labelledby="dialog-heading-id-23" class="slds-popover slds-nubbin_left slds-popover_small" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Medium#

<section aria-describedby="dialog-body-id-21" aria-labelledby="dialog-heading-id-26" class="slds-popover slds-nubbin_left slds-popover_medium" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Large#

<section aria-describedby="dialog-body-id-24" aria-labelledby="dialog-heading-id-29" class="slds-popover slds-nubbin_left slds-popover_large" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Full Width#

<section aria-describedby="dialog-body-id-27" aria-labelledby="dialog-heading-id-32" class="slds-popover slds-nubbin_left slds-popover_full-width" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Nubbins#

Left#

Left
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Left Top
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_left-top" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Left Bottom
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_left-bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Right
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_right" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Right Top
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_right-top" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Right Bottom
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_right-bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Top#

Top
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_top" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Top Left
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_top-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Top Right
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_top-right" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Bottom#

Bottom
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Bottom Left
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
Bottom Right
<section aria-label="Dialog title" aria-describedby="popover-body-id" class="slds-popover slds-nubbin_bottom-right" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Feedback States#

Error#

<section aria-describedby="dialog-body-id-30" aria-labelledby="dialog-heading-id-1" class="slds-popover slds-popover_error slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-33" aria-labelledby="dialog-heading-id-1" class="slds-popover slds-popover_error slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With Bullet List#

<section aria-describedby="dialog-body-id-36" aria-labelledby="dialog-heading-id-1" class="slds-popover slds-popover_error slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Warning#

<section aria-describedby="dialog-body-id-39" aria-labelledby="dialog-heading-id-2" class="slds-popover slds-popover_warning slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-42" aria-labelledby="dialog-heading-id-2" class="slds-popover slds-popover_warning slds-nubbin_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Examples#

Walkthrough#

<section aria-describedby="dialog-body-id-45" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Micro Setup#

<section aria-describedby="dialog-body-id-48" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Micro Setup - Alternate#

<section aria-describedby="dialog-body-id-51" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Micro Setup - In Page#

<section aria-describedby="dialog-body-id-54" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-nubbin_bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Micro Setup - Inline Form#

<section aria-describedby="dialog-body-id-57" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Action#

<section aria-describedby="dialog-body-id-60" aria-label="Dialog Title" class="slds-popover slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Action - With Heading#

<section aria-describedby="dialog-body-id-63" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-66" aria-labelledby="dialog-heading-id-3" class="slds-popover slds-popover_walkthrough slds-popover_walkthrough-alt slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Feature#

<section aria-describedby="dialog-body-id-69" aria-label="Dialog Title" class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With icon and text#

<section aria-describedby="dialog-body-id-72" aria-label="Dialog Title" class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With icon, header, and text#

<section aria-describedby="dialog-body-id-75" aria-labelledby="dialog-heading-id-4" class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With icon, header, text and link#

<section aria-describedby="dialog-body-id-78" aria-labelledby="dialog-heading-id-4" class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

With icon, header, text and footer#

<section aria-describedby="dialog-body-id-81" aria-labelledby="dialog-heading-id-4" class="slds-popover slds-popover_walkthrough slds-popover_feature slds-nubbin_left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Record Preview Panel#

<section aria-labelledby="panel-heading-id" class="slds-popover slds-popover_panel slds-nubbin_left-top" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Prompt#

<section aria-describedby="dialog-body-id-84" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned top left#

<section aria-describedby="dialog-body-id-87" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_top-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned top center#

<section aria-describedby="dialog-body-id-90" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_top" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned top right#

<section aria-describedby="dialog-body-id-93" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_top-right" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned bottom right#

<section aria-describedby="dialog-body-id-96" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_bottom-right" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned bottom center#

<section aria-describedby="dialog-body-id-99" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Positioned bottom left#

<section aria-describedby="dialog-body-id-102" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_bottom-left" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-105" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_top slds-popover_brand" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
<section aria-describedby="dialog-body-id-108" aria-labelledby="dialog-heading-id-5" class="slds-popover slds-popover_prompt slds-popover_prompt_top slds-popover_brand slds-popover_brand-bottom" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Styling Hooks Overview#

A Note About z-index

By default, Popovers use the $z-index-dialog (value of 6000) token. This allows the Popover to appear above the element that triggered it, and in the vast majority of cases should work well out of the box. However, depending on where the Popover code lives when it's triggered, layout issues could arise.

For this particular use case, the --slds-c-popover-position-zindex Styling Hook allows developers to change the z-index value. Please note: when this value is changed, the responsibility is on the developer to maintain the CSS stacking order.

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

CategoryStyling Hook NameValue Type(s)Fallback Value
Position
--slds-c-popover-position-zindex
Integer6000

Overview of CSS Classes#

Selector.slds-popover
Summary

A dialog popover, .slds-popover, can be applied to all variants of a dialog popover. It initiates the styles of the popover and enables .slds-nubbin to be applied.

A dialog popover requires at least one focusable element.

Supportdev-ready
Restrict[role="dialog"], [role="tooltip"]
VariantTrue
Selector.slds-popover_edit
Summary

Dialog specific for inline-edit popover

Restrict.slds-popover
Selector.slds-form-element__label_edit
Summary
Restrict.slds-popover_edit label
Selector.slds-popover__meta
Summary

Applies styles for meta content of popover

Restrict.slds-popover
Selector.slds-popover__body
Summary

Applies styles for primary content area of popover

Restrict.slds-popover div
Selector.slds-listbox
Summary

Listbox container

Supportdev-ready
Restrict.slds-dropdown ul, .slds-dueling-list__options ul, .slds-pill_container ul, .slds-listbox_selection-group ul, .slds-combobox_container ul, .slds-form-element__control ul, .slds-popover__body ul
VariantTrue
Selector.slds-listbox_inline
Summary

Inline listbox

Restrict.slds-listbox
ModifierTrue
Selector.slds-listbox_horizontal
Summary

Horizontal listbox

Restrict.slds-listbox
ModifierTrue
Selector.slds-listbox__item
Summary

Listbox item

Restrict.slds-listbox > li
Selector.slds-listbox__option
Summary

Choosable option within listbox

Restrict.slds-listbox__item > div
Selector.slds-listbox__option-header
Summary

Header for choosable option within listbox

Restrict.slds-listbox__option h3
Selector.slds-listbox__option-icon
Summary

Container for listbox option icon

Restrict.slds-listbox__option span
Selector.slds-has-focus
Summary

Focus state of a vertical listbox option

Restrict.slds-listbox__option
ModifierTrue
Selector.slds-listbox__option_entity
Summary

Modifies the listbox option if it contains an entity object

Restrict.slds-listbox__option
Selector.slds-listbox__option_plain
Summary

Modifies the listbox option if it contains an plain object or string

Restrict.slds-listbox__option
Selector.slds-listbox__option_has-meta
Summary

If the listbox option has metadata or secondary information that sits below its primary text

Restrict.slds-listbox__option
Selector.slds-is-selected
Summary

Modifier that makes selected icon visible

Restrict.slds-listbox__option
ModifierTrue
Selector.slds-listbox__option-text_entity
Summary

The main text of an entity listbox

Restrict.slds-listbox__option span
Selector.slds-listbox__option-meta
Summary

The metadata or secondary text of an entity listbox

Restrict.slds-listbox__option span
Selector.slds-listbox__icon-selected
Summary

The icon within a plain listbox that indicates if an option has been selected or not.

Restrict.slds-listbox__item svg
Selector.slds-listbox_vertical
Summary

Creates a vertical listbox

Restrict.slds-listbox
ModifierTrue
Selector.slds-dropdown_length-5
Summary

Forces overflow scrolling after 5 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-7
Summary

Forces overflow scrolling after 7 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-10
Summary

Forces overflow scrolling after 10 list items

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-5
Summary

Forces overflow scrolling after 5 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-7
Summary

Forces overflow scrolling after 7 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-dropdown_length-with-icon-10
Summary

Forces overflow scrolling after 10 list items with an icon

Restrict.slds-dropdown, .slds-dropdown__list, .slds-listbox
ModifierTrue
Selector.slds-popover__body_small
Summary

Applies a max-height and vertical scrolling to a popover body

Restrict.slds-popover__body
ModifierTrue
Selector.slds-popover__header
Summary

Applies styles for top area of popover

Restrict.slds-popover header, .slds-popover div
Selector.slds-popover__footer
Summary

Applies styles for footer area of popover

Restrict.slds-popover footer
Selector.slds-popover__footer_form
Summary

Applies styles to center align content for footer area of a form popover

Restrict.slds-popover footer
Selector.slds-popover__close
Summary

Close button within a popover

Restrict.slds-popover button
Selector.slds-popover_small
Summary

Width modifier for popover - small

Restrict.slds-popover
ModifierTrue
Selector.slds-popover_medium
Summary

Width modifier for popover - medium

Restrict.slds-popover
ModifierTrue
Selector.slds-popover_large
Summary

Width modifier for popover - large

Restrict.slds-popover
ModifierTrue
Selector.slds-popover_full-width
Summary

Modifier for popover to take 100% width

Restrict.slds-popover
ModifierTrue
Selector.slds-popover_hide
Summary

Modifier to hide a popover

Restrict.slds-popover
Selector.slds-popover_dark
Summary

Applies styles for dark variant of popover

Restrict.slds-popover
ModifierTrue
Selector.slds-popover_brand
Summary

Initializes a brand popover

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover_brand-top
Summary

Applies popover brand styles to top

Restrict.slds-popover_brand
Selector.slds-popover_brand-left
Summary

Applies popover brand styles to left

Restrict.slds-popover_brand
Selector.slds-popover_brand-bottom
Summary

Applies popover brand styles to bottom

Restrict.slds-popover_brand
Selector.slds-popover_brand-right
Summary

Applies popover brand styles to right

Restrict.slds-popover_brand
Selector.slds-popover_error
Summary

Initializes an error non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover__body_scrollable
Summary

Applies scrollable styles for popovers

Restrict.slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body
Selector.slds-popover_featureDeprecated
Summary

Initializes a feature non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-nubbin_top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-top
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-bottom
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-left-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-left-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_top-right-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_bottom-right-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-top-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-top-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_left-bottom-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-nubbin_right-bottom-corner
Summary
Restrict.slds-popover, .slds-dropdown
ModifierTrue
Selector.slds-popover_panel
Summary
Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover_panel__label
Summary
Restrict.slds-popover_panel p
Selector.slds-popover_prompt
Summary

Initializes a prompt non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover_prompt__heading
Summary

Applies styles for heading text of prompt

Restrict.slds-popover_prompt .slds-media__body > h2
Selector.slds-popover_prompt__action-link
Summary

Applies styles for the optional action link in the footer of prompt

Restrict.slds-popover_prompt .slds-popover__footer span
Selector.slds-popover_prompt_top-left
Summary

Position Prompt top left

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_prompt_top
Summary

Position Prompt top center

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_prompt_top-right
Summary

Position Prompt top right

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_prompt_bottom-left
Summary

Position Prompt bottom left

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_prompt_bottom
Summary

Position Prompt bottom center

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_prompt_bottom-right
Summary

Position Prompt bottom right

Restrict.slds-popover_prompt
ModifierTrue
Selector.slds-popover_walkthroughDeprecated
Summary

Initializes a walkthrough non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover_walkthrough-altDeprecated
Summary

Alternate background for walkthrough non-modal dialog

Restrict.slds-popover_walkthrough
ModifierTrue
Selector.slds-popover_warning
Summary

Initializes an warning non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover__body_scrollable
Summary

Applies scrollable styles for popovers

Restrict.slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body

Popovers Release Notes

2.21.0

Added button to the story body-max-height-small to fix scrollable-region-focusable wcag issue.

Added

  • Added title attribute to meet accessibility requirements.

2.19

Fixed

  • Fixed hardcoded walk through header and alt image paths

2.18.0

Changed

  • Removed @noflip annotation from nubbins to make RTL behavior consistent

2.15.0

Changed

  • Base popovers
    • Footer background is now explicitly set to $color-background design token
    • Moved slds-popover__header into slds-popover__body and added a Media Object wrapper to match prompt popover variant
    • Added variant with icon
    • Removed slds-popover__header bottom border
    • Added variant with badge above header
  • Warning feedback state
    • Footer background color is now explicitly set to transparent
    • Body is now indented to align with header
  • Error feedback state
    • Footer background color is now explicitly set to transparent
    • Body is now indented to align with header
  • Prompt variant
    • Footer top border changed to match default popover border color and width
  • Walkthrough variant
    • Removed header background image
    • Footer background color is now explicitly set to transparent

Added

  • Added light and dark Brand variants, including new selectors .slds-popover_brand, .slds-popover_brand-dark, .slds-popover_brand-top, .slds-popover_brand-left, .slds-popover_brand-bottom, .slds-popover_brand-right
  • Added new Prompt branded variants
  • Enabled styling hooks for popovers. See popovers' styling hooks overview table for a full listing of the currently available hooks.

2.13.1

Changed

  • Removed Mobile examples as they did not conform to the specification.

2.12.0

Fixed

  • Fixed the text color in form inputs for the Walkthrough variation.

2.11.7

Added

  • Added documentation and examples for mobile/touch context

2.10.0

Added

  • Added a new 'prompt' variant of popover useful for showing non-blocking messages needing interaction.
  • Added @noflip annotation to left and right nubbin selectors.

2.8.0

Fixed

  • Improved the contrast for focus and hover states on the close button.

Added

  • Added slds-popover_panel__label to increase panel label font size to 14px and apply bold font weight.
  • Added slds-popover__footer_form to center align content and add a background for footers of form popovers.

Removed

  • Removed slds-text-title_caps from panel labels.

2.7.0

Added

  • Added slds-nubbin_*-corner modifier classes to place nubbin elements at the corner of a Popover.

Fixed

  • Fixed a bug where long strings of text would overflow the popover boundary. Popover body, header, and footer now include word-wrap: break-word.
  • Increased the contrast for focused links and buttons in our inversed popovers, Walkthrough and Feature.
  • Fixed a bug that allowed slds-popover_small to grow larger than its expected width.
  • Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden.