adds twipsy js to regular index for positioning

3 files changed, 16 insertions, 57 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 536446c23..187fc7984 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -46,7 +46,7 @@ section > .row {
   font-weight: bold;
 }
 #masthead {
-  margin-top: 40px;
+  padding-top: 40px;
 }
 #masthead h1,
 #masthead p {
@@ -175,6 +175,7 @@ section > .row {
           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 }
 .diagram {
+  height: 140px;
   padding: 4px;
 }
 .mini-layout {
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index db59c79f9..86eefa89d 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -42,42 +42,15 @@ $(document).ready(function(){
   // POSITION STATIC TWIPSIES
   // ========================
 
-  $('.twipsies.well a').each(function () {
-    var type = this.title
-      , $anchor = $(this)
-      , $twipsy = $('.twipsy.' + type)
-
-      , twipsy = {
-          width: $twipsy.width() + 10
-        , height: $twipsy.height() + 10
-        }
-
-      , anchor = {
-          position: $anchor.position()
-        , width: $anchor.width()
-        , height: $anchor.height()
-        }
-
-      , offset = {
-          above: {
-            top: anchor.position.top - twipsy.height
-          , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
-          }
-        , below: {
-            top: anchor.position.top + anchor.height
-          , left: anchor.position.left + (anchor.width/2) - (twipsy.width/2)
-          }
-        , left: {
-            top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
-          , left: anchor.position.left - twipsy.width - 5
-          }
-        , right: {
-            top: anchor.position.top + (anchor.height/2) - (twipsy.height/2)
-          , left: anchor.position.left + anchor.width + 5
-          }
-      }
-
-    $twipsy.css(offset[type])
-  });
+  $(".twipsies a").each(function () {
+     $(this)
+      .twipsy({
+        live: false
+      , placement: $(this).attr('title')
+      , trigger: 'manual'
+      , offset: 2
+      })
+      .trigger('twipsy:show')
+    })
 
 });
diff --git a/docs/index.html b/docs/index.html
index 42c548ea3..224347ca8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,6 +22,7 @@
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script>$(function () { prettyPrint() })</script>
     <script src="../js/bootstrap-dropdown.js"></script>
+    <script src="../js/bootstrap-twipsy.js"></script>
     <script src="assets/js/application.js"></script>
     <script src="assets/js/application-scrollspy.js"></script>
 
@@ -1356,22 +1357,6 @@
           <p class="muted" style="margin-bottom: 0">
 Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. <a href="#" title="right">Voluptasdicta</a> eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt <a href="#" title="left">sed</a> dicta quae accusantium fugit voluptas nemo voluptas voluptatem <a href="#" title="above">rem</a> quae aut veritatis quasi quae.
           </p>
-          <div class="twipsy below">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">below!</div>
-          </div>
-          <div class="twipsy right">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">right!</div>
-          </div>
-          <div class="twipsy left">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">left!</div>
-          </div>
-          <div class="twipsy above">
-            <div class="twipsy-arrow"></div>
-            <div class="twipsy-inner">above!</div>
-          </div>
         </div>
       </div>
     </div>
@@ -1437,15 +1422,15 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
            </tr>
            <tr>
              <td><a href="./javascript.html#dropdowns">bootstrap-dropdown.js</a></td>
-             <td>This plugin is for adding dropdown to the bootstrap nav.</td>
+             <td>This plugin is for adding dropdowns to the bootstrap topbar or tabbed navigations.</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#tabs">bootstrap-tabs.js</a></td>
-             <td>This plugin adds quick, dynamic tab and pill functionality.</td>
+             <td>This plugin adds quick, dynamic tab and pill functionality for cycling through local content.</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td>
-             <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for title storage!</td>
+             <td>Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!</td>
            </tr>
            <tr>
              <td><a href="./javascript.html#popover">bootstrap-popover.js</a></td>