Components

Popovers

A popover is a non-modal dialog.

BaseBase › DefaultBase › With CloseBase › With HeaderBase › With FooterBasedev ready

Preview

Code

<section class="slds-popover slds-nubbin--left" role="dialog" aria-describedby="dialog-body-id-48">
  <div class="slds-popover__body" id="dialog-body-id-48">
    <p>Lorem ipsum dolor sit amet, consectetur <a href="javascript:void(0);">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</section>

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 is required at least one focusable element.

PanelsPanelsdev ready

Preview

Code

<div class="slds-popover slds-popover--panel slds-nubbin--left-top" role="dialog">
  <div class="slds-popover__header">
    <div class="slds-media slds-m-bottom--small slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-account">
          <svg class="slds-icon slds-icon--small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>
          <span class="slds-assistive-text">Tesla Motors</span>
        </span>
      </div>
      <div class="slds-media__body">
        <p class="slds-text-heading--medium slds-hyphenate"><a href="javascript:void(0);">Tesla Motors</a></p>
      </div>
    </div>
    <div class="slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-title--caps slds-truncate" title="Billing Address">Billing Address</p>
          </dt>
          <dd>
            <p class="slds-truncate" title="3500 Deer Creek Rd.">3500 Deer Creek Rd.</p>
            <p class="slds-truncate" title="Palo Alto, CA 94304">Palo Alto, CA 94304</p>
          </dd>
        </dl>
      </div>
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-title--caps slds-truncate" title="Phone">Phone</p>
          </dt>
          <dd><a href="javascript:void(0);">212-345-3485</a></dd>
        </dl>
      </div>
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-title--caps slds-truncate" title="Website">Website</p>
          </dt>
          <dd><a href="javascript:void(0);">teslamotors.com</a></dd>
        </dl>
      </div>
      <div class="slds-p-horizontal--small slds-size--1-of-2 slds-p-bottom--x-small">
        <dl>
          <dt>
            <p class="slds-text-title--caps slds-truncate" title="Account Owner">Account Owner</p>
          </dt>
          <dd><a href="javascript:void(0);">Jeff Maguire</a></dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="slds-popover__body">
    <dl class="slds-popover__body-list">
      <dt class="slds-m-bottom--small">
        <div class="slds-media slds-media--center">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-opportunity">
              <svg class="slds-icon slds-icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
              </svg>
              <span class="slds-assistive-text">Opportunities</span>
            </span>
          </div>
          <div class="slds-media__body">
            <p class="slds-text-heading--small slds-hyphenate">Opportunities (2+)</p>
          </div>
        </div>
      </dt>
      <dd class="slds-tile">
        <p class="slds-truncate" title="Tesla - Mule ESB"><a href="javascript:void(0);">Tesla - Mule ESB</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Value">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="$500,000">$500,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Close Date">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Dec 15, 2015">Dec 15, 2015</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-tile">
        <p class="slds-truncate"><a href="javascript:void(0);">Tesla - Anypoint Studios</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Value">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="$60,000">$60,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Close Date">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Jan 15, 2016">Jan 15, 2016</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-m-top--x-small slds-text-align--right"><a href="javascript:void(0);" title="View all Opportunities">View All</a></dd>
    </dl>
    <dl class="slds-popover__body-list">
      <dt class="slds-m-bottom--small">
        <div class="slds-media slds-media--center">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-case">
              <svg class="slds-icon slds-icon--small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#case"></use>
              </svg>
              <span class="slds-assistive-text">Cases</span>
            </span>
          </div>
          <div class="slds-media__body">
            <p class="slds-text-heading--small slds-hyphenate">Cases (1)</p>
          </div>
        </div>
      </dt>
      <dd class="slds-tile">
        <p class="slds-truncate" title="Tesla - Anypoint Studios"><a href="javascript:void(0);">Tesla - Anypoint Studios</a></p>
        <div class="slds-tile__detail">
          <dl class="slds-dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Value">Value</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="$60,000">$60,000</p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate" title="Close Date">Close Date</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate" title="Jan 15, 2016">Jan 15, 2016</p>
            </dd>
          </dl>
        </div>
      </dd>
      <dd class="slds-m-top--x-small slds-text-align--right"><a href="javascript:void(0);" title="View all Opportunities">View All</a></dd>
    </dl>
  </div>
</div>

Panels are used to provide a preview of the hyperlinked content.

ThemesThemes › InfoThemes › ErrorThemes › WarningThemes › SuccessThemesdev ready

Preview

Code

<div class="slds-popover slds-nubbin--left slds-theme--info" role="dialog">
  <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
</div>

A .slds-popover can accept theme modifiers. Adding a theme class such as .slds-theme--error to the .slds-popover will apply that theme.

NubbinsNubbins › LeftNubbins › Left (top)Nubbins › Left (bottom)Nubbins › TopNubbins › Top (left)Nubbins › Top (right)Nubbins › RightNubbins › Right (top)Nubbins › Right (bottom)Nubbins › BottomNubbins › Bottom (left)Nubbins › Bottom (right)Nubbinsdev ready

Preview

Code

<div class="slds-popover slds-nubbin--left" role="dialog">
  <div class="slds-popover__body">
    <code>slds-popover
      <br/>slds-nubbin--left</code>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, quaerat? Accusamus excepturi eos, molestias expedita distinctio eligendi ut esse quasi!</p>
  </div>
</div>

Nubbins are indicators that inform the user of the direction of the content associated with the popover.

Component Overview

A popover is used to display contextual information to the user. It can be a simple tooltip or used for more complex components, such as a preview panel.

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

Showing the popover on hover or on keyboard focus ensures that all users can access it, even if they aren’t using a mouse.

Give the popover an ID and use that as the value of the aria-describedby attribute of the DOM element it describes. This helps users of assistive technology read the tooltip content.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-popover
Applied to:

<div>

Outcome:

Initializes popover

Required:

Required

Comments:

--

.slds-popover__header
Applied to:

<div>

Outcome:

Applies styles for top area of popover

Required:

No, optional element or modifier

Comments:

--

.slds-popover__body
Applied to:

<div>

Outcome:

Applies syles for primary content area of popover

Required:

No, optional element or modifier

Comments:

--

.slds-popover__footer
Applied to:

<div>

Outcome:

Applies styles for footer area of popover

Required:

No, optional element or modifier

Comments:

--

.slds-popover--tooltip
Applied to:

.slds-popover

Outcome:

Modifier used to apply tooltip specific styles

Required:

No, optional element or modifier

Comments:

--

.slds-popover--panel
Applied to:

.slds-popover

Outcome:

Modifier used to apply panel specific styles

Required:

No, optional element or modifier

Comments:

--

.slds-popover__close
Applied to:

.slds-button--icon

Outcome:

Close button within a popover

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-left
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-right
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-left
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-right
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left
Applied to:

.slds-popover

Outcome:

Triangle that points to the left which is vertically centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left-top
Applied to:

.slds-popover

Outcome:

Triangle that points to the left which is top aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--left-bottom
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is bottom aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is vertically centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right-top
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is top aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--right-bottom
Applied to:

.slds-popover

Outcome:

Triangle that points to the right which is bottom aligned

Required:

No, optional element or modifier

Comments:

--