Component Blueprints

Popovers

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, popovers will have increased close button size to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in the appropriate context. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

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>

Scrolling region with max-height#

<section aria-describedby="dialog-body-id-12" aria-labelledby="dialog-heading-id-17" 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-15" aria-labelledby="dialog-heading-id-20" 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-18" aria-labelledby="dialog-heading-id-23" 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-21" aria-labelledby="dialog-heading-id-26" 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-24" aria-labelledby="dialog-heading-id-29" 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>
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>
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>
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-27" 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-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>

Warning#

<section aria-describedby="dialog-body-id-33" 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-36" 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-39" 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-42" 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-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 - In Page#

<section aria-describedby="dialog-body-id-48" 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-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>

Action#

<section aria-describedby="dialog-body-id-54" 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-57" 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-60" 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-63" 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-66" 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-69" 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>
<section aria-describedby="dialog-body-id-72" 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>
<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>

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-78" 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>

Mobile context changes

Please be aware that in a mobile context prompts will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Positioned top left#

<section aria-describedby="dialog-body-id-81" 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-84" 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-87" 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-90" 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-93" 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-96" 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>

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__body
Summary

Applies syles for primary content area of popover

Restrict.slds-popover div
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_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_feature
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_walkthrough
Summary

Initializes a walkthrough non-modal dialog

Supportdev-ready
Restrict.slds-popover
VariantTrue
Selector.slds-popover_walkthrough-alt
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.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.