jQuery Popover

Install

bower install gb-jquery-popover

In your html, reference the latest versioned files from /dist.

<head>
  <link rel="stylesheet" href="bower_components/dist/jquery-popover-x.y.z.css">
</head>
<body>
  <script src="bower_components/dist/jquery-popover-x.y.z.js"></script>
</body>

Usage

Add popover markup

<span class="popover-wrapper">
  <a href="#" data-role="popover" data-target="example-popover">Open</a>
  <div class="popover-modal example-popover">
    <div class="popover-body">
      <!-- contents here -->
    </div>
  </div>
</span>

and enable them with jQuery

$('[data-role="popover"]').popover();

Basic Popover

<span class="popover-wrapper">
  <a href="#" data-role="popover" data-target="example-popover">Open</a>
  <div class="popover-modal example-popover">
    <div class="popover-body">
      <ul>
        <li>Home</li>
        <li>Products</li>
        <li>Services</li>
        <li>About</li>
      </ul>
    </div>
  </div>
</span>

Popover right-aligned

Tag .popover-modal with .right

<span class="popover-wrapper right">
  <a href="#" data-role="popover" data-target="example-popover">Open</a>
  <div class="popover-modal example-popover">
    <div class="popover-body">
      <p>Hello world!</p>
    </div>
  </div>
</span>

Popover with close button

To add a close button, just add data-toggle-role="close"

<span class="popover-wrapper">
  <a href="#" data-role="popover" data-target="example-popover">Open</a>
  <div class="popover-modal example-popover">
    <div class="popover-header">Title
      <a href="#" data-toggle-role="close" style="float: right">×</a>
    </div>
    <div class="popover-body popover-body-padded">
      <div>Hi</div>
    </div>
  </div>
</span>