Popover

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/popover@2.0.0

Variants#


Standard#
Contribution

  • Ballard
  • Fremont
  • Greenwood
  • United States of America
<div class="spectrum-Popover is-open">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>
Show markup

Popover - Dialog style#
Contribution

Spectrum Popovers are implemented using the Dialog's inner elements.

Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Very Very Very Long Popover Title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Success Popover
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah


Very Long Error Message With Much Text
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah
<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--bottom is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Very Very Very Long Popover Title</div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 215px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--top spectrum-Dialog--success is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Success Popover</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>

<br>
<br>

<div class="spectrum-Popover spectrum-Popover--dialog spectrum-Popover--right spectrum-Dialog--error is-open" style="max-width:320px">
  <div class="spectrum-Dialog-header">
    <div class="spectrum-Dialog-title">Very Long Error Message With Much Text</div>
    <div class="spectrum-Dialog-typeIcon"></div>
  </div>
  <div class="spectrum-Dialog-content">Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah</div>
  <div class="spectrum-Dialog-footer">
    <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--quiet">
      <span>Cancel</span>
    </button>
    <button class="spectrum-Button spectrum-Button--primary spectrum-Button--quiet">
      <span>Save</span>
    </button>
  </div>
  <div class="spectrum-Popover-tip"></div>
</div>

<div class="dummy-spacing" style="height: 290px"></div>
Show markup