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 
  1. <button class="sb-btn sb-btn--primary">Popover anchor (trigger)</button>
  2. <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">
  3.   <div class="sb-popover__dialog" role="document">
  4.     <div class="sb-popover__content sb-margin-top-xs" role="presentation" tabIndex="-1">
  5.       <div class="sb-padding">
  6.         <p id="popover-content">Popover content</p>
  7.       </div>
  8.     </div>
  9.   </div>
  10. </div>
Source: components/_popover.scss, line 1