Popovers
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
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 thedialog
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 thedialog
) - If no Heading element is present, use the
aria-label
attribute and set the value to be a meaningful title of thedialog
- Apply the
- The
dialog
should be described where possible. This can be achieved by applying thearia-describedby
attribute to thedialog
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#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>
With Footer#
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Header Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!
<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#
Resolve error
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Learn More
<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>
With Footer#
Resolve error
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Learn More
<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#
Review warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Learn More
<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>
With Footer#
Review warning
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Learn More
<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#
Manage your channels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Manage your channels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Manage your channels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Manage your channels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Manage your channels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Text that describes the action
Step 3 of 4
<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#
Title
Text that describes the action
Step 3 of 4
<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>
Action - With Link#
<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#
Shelly, it seems you frequent this record. Try favoriting it for easy access.
<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#
Shelly, it seems you frequent this record. Try favoriting it for easy access.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>
With icon, header, text and link#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
<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>
With icon, header, text and footer#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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#
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-popover |
---|---|
Summary | A dialog popover, A dialog popover requires at least one focusable element. |
Support | dev-ready |
Restrict | [role="dialog"], [role="tooltip"] |
Variant | True |
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 |
Modifier | True |
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 |
Modifier | True |
Selector | .slds-popover_medium |
---|---|
Summary | Width modifier for popover - medium |
Restrict | .slds-popover |
Modifier | True |
Selector | .slds-popover_large |
---|---|
Summary | Width modifier for popover - large |
Restrict | .slds-popover |
Modifier | True |
Selector | .slds-popover_full-width |
---|---|
Summary | Modifier for popover to take 100% width |
Restrict | .slds-popover |
Modifier | True |
Selector | .slds-popover_hide |
---|---|
Summary | Modifier to hide a popover |
Restrict | .slds-popover |
Selector | .slds-popover_error |
---|---|
Summary | Initializes an error non-modal dialog |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
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 |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
Selector | .slds-nubbin_top |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_top-left |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_top-right |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_bottom |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_bottom-left |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_bottom-right |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_left |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_left-top |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_left-bottom |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_right |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_right-top |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_right-bottom |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_top-left-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_bottom-left-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_top-right-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_bottom-right-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_left-top-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_right-top-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_left-bottom-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-nubbin_right-bottom-corner |
---|---|
Summary | |
Restrict | .slds-popover, .slds-dropdown |
Modifier | True |
Selector | .slds-popover_panel |
---|---|
Summary | |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
Selector | .slds-popover_panel__label |
---|---|
Summary | |
Restrict | .slds-popover_panel p |
Selector | .slds-popover_prompt |
---|---|
Summary | Initializes a prompt non-modal dialog |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
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 |
Modifier | True |
Selector | .slds-popover_prompt_top |
---|---|
Summary | Position Prompt top center |
Restrict | .slds-popover_prompt |
Modifier | True |
Selector | .slds-popover_prompt_top-right |
---|---|
Summary | Position Prompt top right |
Restrict | .slds-popover_prompt |
Modifier | True |
Selector | .slds-popover_prompt_bottom-left |
---|---|
Summary | Position Prompt bottom left |
Restrict | .slds-popover_prompt |
Modifier | True |
Selector | .slds-popover_prompt_bottom |
---|---|
Summary | Position Prompt bottom center |
Restrict | .slds-popover_prompt |
Modifier | True |
Selector | .slds-popover_prompt_bottom-right |
---|---|
Summary | Position Prompt bottom right |
Restrict | .slds-popover_prompt |
Modifier | True |
Selector | .slds-popover_walkthrough |
---|---|
Summary | Initializes a walkthrough non-modal dialog |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
Selector | .slds-popover_walkthrough-alt |
---|---|
Summary | Alternate background for walkthrough non-modal dialog |
Restrict | .slds-popover_walkthrough |
Modifier | True |
Selector | .slds-popover_warning |
---|---|
Summary | Initializes an warning non-modal dialog |
Support | dev-ready |
Restrict | .slds-popover |
Variant | True |
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.