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.

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.

Select a device to set the width of the example

Base

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

With Header

<section aria-describedby="dialog-body-id-136" aria-labelledby="dialog-heading-id-102" 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">

With Footer

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

Scrolling region with max-height

<section aria-describedby="dialog-body-id-142" aria-labelledby="dialog-heading-id-108" 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">

Widths

Small

<section aria-describedby="dialog-body-id-145" aria-labelledby="dialog-heading-id-111" 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">

Medium

<section aria-describedby="dialog-body-id-148" aria-labelledby="dialog-heading-id-114" 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">

Large

<section aria-describedby="dialog-body-id-151" aria-labelledby="dialog-heading-id-117" 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">

Full Width

<section aria-describedby="dialog-body-id-154" aria-labelledby="dialog-heading-id-120" 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">

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

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

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

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

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

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

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

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

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

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

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

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

Feedback States

Error

<section aria-describedby="dialog-body-id-157" aria-labelledby="dialog-heading-id-56" 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">

With Footer

<section aria-describedby="dialog-body-id-160" aria-labelledby="dialog-heading-id-56" 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">

Warning

<section aria-describedby="dialog-body-id-163" aria-labelledby="dialog-heading-id-93" 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">

With Footer

<section aria-describedby="dialog-body-id-166" aria-labelledby="dialog-heading-id-93" 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">

Examples

Walkthrough

<section aria-describedby="dialog-body-id-169" aria-labelledby="dialog-heading-id-94" 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">

Micro Setup

<section aria-describedby="dialog-body-id-172" aria-labelledby="dialog-heading-id-94" 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">

Micro Setup - Alternate

<section aria-describedby="dialog-body-id-175" aria-labelledby="dialog-heading-id-94" 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">

Micro Setup - In Page

<section aria-describedby="dialog-body-id-178" aria-labelledby="dialog-heading-id-94" 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">

Micro Setup - Inline Form

<section aria-describedby="dialog-body-id-181" aria-labelledby="dialog-heading-id-94" 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">

Action

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

Action - With Heading

<section aria-describedby="dialog-body-id-187" aria-labelledby="dialog-heading-id-94" 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">

Action - With Link

<section aria-describedby="dialog-body-id-190" aria-labelledby="dialog-heading-id-94" 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">

Feature

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

With icon and text

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

With icon, header, and text

<section aria-describedby="dialog-body-id-199" aria-labelledby="dialog-heading-id-95" 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">

With icon, header, text and link

<section aria-describedby="dialog-body-id-202" aria-labelledby="dialog-heading-id-95" 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">

With icon, header, text and footer

<section aria-describedby="dialog-body-id-205" aria-labelledby="dialog-heading-id-95" 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">

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

Prompt

<section aria-describedby="dialog-body-id-208" aria-labelledby="dialog-heading-id-96" 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">

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.

Select a device to set the width of the example

Positioned top left

<section aria-describedby="dialog-body-id-211" aria-labelledby="dialog-heading-id-96" 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">

Positioned top center

<section aria-describedby="dialog-body-id-214" aria-labelledby="dialog-heading-id-96" 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">

Positioned top right

<section aria-describedby="dialog-body-id-217" aria-labelledby="dialog-heading-id-96" 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">

Positioned bottom right

<section aria-describedby="dialog-body-id-220" aria-labelledby="dialog-heading-id-96" 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">

Positioned bottom center

<section aria-describedby="dialog-body-id-223" aria-labelledby="dialog-heading-id-96" 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">

Positioned bottom left

<section aria-describedby="dialog-body-id-226" aria-labelledby="dialog-heading-id-96" 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">