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.

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

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.

Applies syles for primary content area of popover

Applies styles for footer area of popover

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

error

Error popovers are used to notify the user of errors on the page

If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable`  modifier on the body element.

In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.

default

examples

feature

Feature components are use to describe notable features

panels

prompt

Prompt components are used to provide an interactive custom message.

walkthrough

Initializes a walkthrough non-modal dialog

Walkthrough components are used to provide an interactive and educational prospect experience for setup.

Alternate background for walkthrough non-modal dialog

warning

Warning popovers are used to warn the user about information on the page that deserves caution

If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element.

In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element.

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

Label for panels

Applies styles for heading text of prompt

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