Add Popovers code

1 files changed, 105 insertions, 1 deletions

diff --git a/docs/components.html b/docs/components.html
index 6812395..4512945 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -71,6 +71,9 @@
                 <a href="components.html#navigation">Navigation</a>
               </li>
               <li class="nav-item">
+                <a href="components.html#popovers">Popovers</a>
+              </li>
+              <li class="nav-item">
                 <a href="components.html#steps">Steps</a>
               </li>
               <li class="nav-item">
@@ -1374,6 +1377,107 @@
 
         </section>
 
+        <section id="popovers" class="container">
+          <header class="text-center"><h3>Popovers</h3></header>
+          <section class="notes">
+            <p><strong>Popovers</strong> are small overlay content containers. Popovers component is built entirely in CSS.</p>
+          </section>
+          <div class="columns">
+            <div class="column col-3 col-sm-6">
+              <div class="popover">
+                <a href="#popovers" class="btn btn-primary">
+                  top popover
+                </a>
+                <div class="popover-container">
+                  <div class="card">
+                    <div class="card-header">
+                      <div class="card-title">Apple</div>
+                      <div class="card-subtitle">Software and hardware</div>
+                    </div>
+                    <div class="card-body">
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                    </div>
+                    <div class="card-footer">
+                      <button class="btn btn-primary">Buy</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="column col-3 col-sm-6">
+              <div class="popover popover-right">
+                <a href="#popovers" class="btn btn-primary">
+                  right popover
+                </a>
+                <div class="popover-container">
+                  <div class="card">
+                    <div class="card-header">
+                      <div class="card-title">Apple</div>
+                      <div class="card-subtitle">Software and hardware</div>
+                    </div>
+                    <div class="card-body">
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                    </div>
+                    <div class="card-footer">
+                      <button class="btn btn-primary">Buy</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="column col-3 col-sm-6">
+              <div class="popover popover-bottom">
+                <a href="#popovers" class="btn btn-primary">
+                  bottom popover
+                </a>
+                <div class="popover-container">
+                  <div class="card">
+                    <div class="card-header">
+                      <div class="card-title">Apple</div>
+                      <div class="card-subtitle">Software and hardware</div>
+                    </div>
+                    <div class="card-body">
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                    </div>
+                    <div class="card-footer">
+                      <button class="btn btn-primary">Buy</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="column col-3 col-sm-6">
+              <div class="popover popover-left">
+                <a href="#popovers" class="btn btn-primary">
+                  left popover
+                </a>
+                <div class="popover-container">
+                  <div class="card">
+                    <div class="card-header">
+                      <div class="card-title">Apple</div>
+                      <div class="card-subtitle">Software and hardware</div>
+                    </div>
+                    <div class="card-body">
+                      To make a contribution to the world by making tools for the mind that advance humankind.
+                    </div>
+                    <div class="card-footer">
+                      <button class="btn btn-primary">Buy</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <section class="notes">
+            <p></p>
+          </section>
+
+<!-- steps example -->
+<pre class="code" data-lang="HTML"><code>
+</code></pre>
+
+        </section>
+
         <section id="steps" class="container">
           <header class="text-center"><h3>Steps</h3></header>
           <section class="notes">
@@ -1605,7 +1709,7 @@
           </section>
           <div class="columns text-center">
             <div class="column col-xs-12">
-              <button class="btn btn-primary tooltip" data-tooltip="Tooltip Text" data-tooltip-pos="top">top tooltip</button>
+              <button class="btn btn-primary tooltip" data-tooltip="Tooltip Text">top tooltip</button>
             </div>
             <div class="column col-xs-12">
               <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Tooltip Text">right tooltip</button>