Popovers

Popovers

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

BaseDesktop Only

Preview

No content has been added for this component.

No content has been added for this component.

About Base

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.


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

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.

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__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__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_panel
Summary
Restrict.slds-popover
VariantTrue
Selector.slds-popover_walkthrough
Summary

Initializes a walkthrough non-modal dialog

Restrict.slds-popover
VariantTrue
Selector.slds-popover_walkthrough-alt
Summary

Alternate background for walkthrough non-modal dialog

Restrict.slds-popover_walkthrough
ModifierTrue
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