Popovers

Popovers are a type of container that appear over existing content on the page. Popovers allow users to either enter additional data related to an element on a screen or view detailed content related to that element.


When to Use

  • Use a popover to create contextual relationships between a single element displayed on a screen and a more complex set of supporting content or form controls. For example, use a popover when providing additional options related to a filter.
  • Use to display rich text/content that you can’t fit into a tooltip.

When Not to Use

  • Do not use a popover for simple content such as additional help text related to a word or phrase. Instead, use a tooltip.

Usage

  • Popovers can be activated by a button, link, icon or form control. Unlike tooltips which display on hover for non-touch displays, popovers are invoked by clicking or tapping an element.
  • Popovers can be closed via a close icon, by clicking a button or clicking anywhere outside of the popover.
  • The amount of content in a popover should be relatively short. Consider placing longer content in a Modal.
  • Popovers should be positioned based on the available screen space and layout.

Developer Notes

<div class="spark-popover-group">
  <div class="spark-popover">
    <button class="spark-btn--icon spark-icon spark-icon-calendar spark-popover__toggle" title="Calendar">
    </button>
    <form class="spark-popover__content--right col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
      <a class="spark-popover__close" title="Close"></a>
      <h4>Account Sign In</h4>
      <label class="spark-input spark-margin-top">
        <input class="spark-input__field" name="username" role="textbox">
        <span class="spark-label">Username</span>
      </label>
      <label class="spark-input">
        <input class="spark-input__field" name="password" type="password" role="textbox">
        <span class="spark-label">Password</span>
      </label>
      <button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
      <div class="spark-text-center spark-margin-top">
        <button class="spark-btn--link spark-eta">Forgot username or password?</button>
      </div>
      <span class="spark-popover__caret"></span>
    </form>
  </div>
  <div class="spark-popover">
    <button class="spark-btn--icon spark-icon spark-icon-alert-triangle spark-popover__toggle" title="Notifications">
    </button>
    <div class="spark-popover__content--top" role="tooltip">
      <b>Departure Date:</b> 04/30/2015
      <br><b>Current Loadfactor:</b> 90
      <br><b>Expected Loadfactor:</b> 95
      <br><b>Current Loadfactor LY:</b> 92
      <br><b>Final Loadfactor LY:</b> 0
      <span class="spark-popover__caret"></span>
    </div>
  </div>
  <div class="spark-popover">
    <button class="spark-btn--icon spark-icon spark-icon-cog spark-popover__toggle" title="Settings">
    </button>
    <div class="spark-popover__content--bottom" role="tooltip">
      <ul class="spark-popover__list">
        <li class="spark-popover__list-item">
          <a class="spark-popover__list-link">Clear settings</a>
        </li>
        <li class="spark-popover__list-item">
          <a class="spark-popover__list-link">Reset to defaults</a>
        </li>
        <li class="spark-popover__list-item">
          <a class="spark-popover__list-link">Set as new default</a>
        </li>
      </ul>
      <span class="spark-popover__caret"></span>
    </div>
  </div>
  <div class="spark-popover">
    <button class="spark-btn--icon spark-icon spark-icon-trash spark-popover__toggle" title="Delete">
    </button>
    <div class="spark-popover__content--left" role="tooltip">
      <ul class="spark-popover__list">
        <li class="spark-popover__list-item">
          <a class="spark-popover__list-link">Archive</a>
        </li>
        <li class="spark-popover__list-item">
          <a class="spark-popover__list-link spark-danger">Remove forever</a>
        </li>
      </ul>
      <span class="spark-popover__caret"></span>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(el);

// jQuery
$('.spark-popover').sparkPopover();

Popovers are created by adding the .spark-popover class to an element. The two primary components of a popover are the toggle and the content.

The toggle is used to show/hide the content and it is created by adding a class of .spark-popover__toggle to an element inside the popover.

The content is created using a class of .spark-popover__content--top, .spark-popover__content--bottom, .spark-popover__content--left or .spark-popover__content--right. These different content classes determine the position of the popover.

Additionally, a list of navigation items can be defined as the content for a popover. This is done by adding the .spark-popover__list class to the content and creating list items and links using the .spark-popover__list-item and .spark-popover__list-link classes to define menu items.