2.27 #Components.popover Popover

Toggle example guides Toggle HTML markup

Note: To implement correctly the animation for the popover, you should not forget to apply sb-popover__content--position-top if the popover is on top of the anchor element

Browser support: IE9+ (no transitions), Safari6+, Firefox30+, Chrome30+

Markup 
<button class="sb-btn sb-btn--primary">Popover anchor (trigger)</button>
<div class="sb-modal sb-popover--open" role="dialog" aria-labelledby="popover-content" data-kss-animation-switch="sb-popover--open,sb-popover--close" data-kss-animation-name="Popover open/close">
  <div class="sb-popover__dialog" role="document">
    <div class="sb-popover__content sb-margin-top-xs" role="presentation" tabIndex="-1">
      <div class="sb-padding">
        <p id="popover-content">Popover content</p>
      </div>
    </div>
  </div>
</div>
Source: components/_popover.scss, line 1