{{#markdown}}
Popovers are a kind of extended tooltips: more content to display, optionally a header, optionally a footer, what else.
{{/markdown}}

<div class="gu gu-last gr grsxl">

    <div class="gu gu-1of4 gu-m-1of2 gu-s-1of1">
      <p>
      <a class="btn btn-default btn-large popover-display">
        Popover on top (default)
        <span class="popover">
          <span class="popover-header">Header</span>
          <span class="popover-content">
            Loremipsumdolorsitametconsecteturadipiscingelitpraesentbibendumullamcorper lectus dictum blandit.
          </span>
          <span class="popover-footer">Footer</span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-1of4 gu-m-last">
      <p>
      <a class="btn btn-default btn-large popover-display popover-bottom">
        Popover on bottom
        <span class="popover">
          <span class="popover-header">Header</span>
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-1of4 gu-m-1of2 gu-s-1of1">
      <p>
      <a class="btn btn-default btn-large popover-display popover-left">
        Popover on top left
        <span class="popover">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
          <span class="popover-footer">Footer</span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-last">
      <p>
      <a class="btn btn-default btn-large popover-display popover-bottom popover-left">
        Popover on bottom left
        <span class="popover">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-1of4 gu-m-1of2 gu-s-1of1">
      <p>
      <a class="popover-display popover-bottom" href="">
        Extra large
        <span class="popover popover-xl">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-1of4 gu-m-last">
      <p>
      <a class="popover-display popover-bottom" href="">
        Large
        <span class="popover popover-l">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-1of4 gu-m-1of2 gu-s-1of1">
      <p>
      <a class="popover-display popover-bottom" href="">
        Medium
        <span class="popover popover-m">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

    <div class="gu gu-last">
      <p>
      <a class="popover-display popover-bottom" href="">
        Small (default)
        <span class="popover popover-s">
          <span class="popover-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.
          </span>
        </span>
      </a>
      </p>
    </div>

  </div>