resolve merge conflict

5 files changed, 256 insertions, 33 deletions

diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css
index d8f75c386a..45854bb456 100644
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -1599,3 +1599,63 @@ div.modal .modal-footer .btn {
   float: right;
   margin-left: 10px;
 }
+div.twipsy {
+  display: block;
+  position: absolute;
+  visibility: visible;
+  padding: 5px;
+  font-size: 10px;
+  z-index: 100000;
+  filter: alpha(opacity=80);
+  -khtml-opacity: 0.8;
+  -moz-opacity: 0.8;
+  opacity: 0.8;
+}
+div.twipsy.above .twipsy-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000;
+}
+div.twipsy.left .twipsy-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid #000;
+}
+div.twipsy.below .twipsy-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #000;
+}
+div.twipsy.right .twipsy-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid #000;
+}
+div.twipsy .twipsy-inner {
+  padding: 5px 8px 4px;
+  background-color: #000;
+  color: white;
+  text-align: center;
+  max-width: 200px;
+  text-decoration: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+div.twipsy .twipsy-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
diff --git a/bootstrap-1.0.0.min.css b/bootstrap-1.0.0.min.css
index b71e1ab34a..ada1211a06 100644
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -199,3 +199,9 @@ div.modal{position:fixed;top:50%;left:50%;z-index:2000;width:560px;margin:-280px
 div.modal .modal-body{padding:20px;}
 div.modal .modal-footer{background-color:#eee;padding:14px 20px 15px;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}div.modal .modal-footer:after{display:block;visibility:hidden;height:0;clear:both;content:".";}
 div.modal .modal-footer .btn{float:right;margin-left:10px;}
+div.twipsy{display:block;position:absolute;visibility:visible;padding:5px;font-size:10px;z-index:100000;filter:alpha(opacity=80);-khtml-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}div.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000;}
+div.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000;}
+div.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000;}
+div.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000;}
+div.twipsy .twipsy-inner{padding:5px 8px 4px;background-color:#000;color:white;text-align:center;max-width:200px;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+div.twipsy .twipsy-arrow{position:absolute;width:0;height:0;}
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4b377f7043..82cf307e91 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,6 +1,47 @@
 $(document).ready(function(){
 
-  // Example dropdown for topbar nav
+  // scroll spy logic
+  // ================
+
+  var activeTarget,
+      $window = $(window),
+      position = {},
+      nav = $('body > .topbar li a'),
+      targets = nav.map(function () {
+        return $(this).attr('href');
+      }),
+      offsets = $.map(targets, function (id) {
+        return $(id).offset().top;
+      });
+
+
+  function setButton(id) {
+    nav.parent("li").removeClass('active');
+    $(nav[$.inArray(id, targets)]).parent("li").addClass('active');
+  }
+
+  function processScroll(e) {
+    var scrollTop = $window.scrollTop() + 10, i;
+    for (i = offsets.length; i--;) {
+      if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
+        activeTarget = targets[i];
+        setButton(activeTarget);
+      }
+    }
+  }
+
+  nav.click(function () {
+    processScroll();
+  });
+
+  processScroll();
+
+  $window.scroll(processScroll);
+
+
+  // Dropdown example for topbar nav
+  // ===============================
+
   $("body").bind("click", function(e) {
     $("ul.menu-dropdown").hide();
     $('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
@@ -23,10 +64,16 @@ $(document).ready(function(){
     return false;
   });
 
+
   // table sort example
+  // ==================
+
   $("#sortTableExample").tablesorter( {sortList: [[1,0]]} );
 
-  // add on
+
+  // add on logic
+  // ============
+
   $('.add-on :checkbox').click(function() {
     if ($(this).attr('checked')) {
       $(this).parents('.add-on').addClass('active');
@@ -34,8 +81,11 @@ $(document).ready(function(){
       $(this).parents('.add-on').removeClass('active');
     }
   });
-  
-  // Disable certain links and buttons in docs
+
+
+  // Disable certain links in docs
+  // =============================
+
   $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function(e) {
     e.preventDefault();
   });
@@ -49,39 +99,46 @@ $(document).ready(function(){
   });
 
 
-  // scroll spyer
-  var activeTarget,
-      $window = $(window),
-      position = {},
-      nav = $('body > .topbar li a'),
-      targets = nav.map(function () {
-        return $(this).attr('href');
-      }),
-      offsets = $.map(targets, function (id) {
-        return $(id).offset().top;
-      });
+  // POSITION TWIPSIES
+  // =================
 
+  $('.twipsies.well a').each(function () {
+    var type = this.title
+      , $anchor = $(this)
+      , $twipsy = $('.twipsy.' + type)
 
-  function setButton(id) {
-    nav.parent("li").removeClass('active');
-    $(nav[$.inArray(id, targets)]).parent("li").addClass('active');
-  }
+      , twipsy = {
+          width: $twipsy.width() + 10
+        , height: $twipsy.height() + 10
+        }
 
-  function processScroll(e) {
-    var scrollTop = $window.scrollTop() + 10, i;
-    for (i = offsets.length; i--;) {
-      if (activeTarget != targets[i] && scrollTop >= offsets[i] && (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
-        activeTarget = targets[i];
-        setButton(activeTarget);
+      , 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
+          }
       }
-    }
-  }
 
-  nav.click(function () {
-    processScroll();
-  });
+    $twipsy.css(offset[type])
 
-  processScroll();
+  });
 
-  $window.scroll(processScroll);
 });
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index d1b9241819..1caea7c8fa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -265,8 +265,10 @@
     <h6>h6. Heading 6</h6>
   </div>
   <div class="span6 columns">
-    <h3>Example paragraph (body text)</h3>
+    <h3>Example paragraph</h3>
     <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+    <h1>Example heading<small>Has sub-heading...</small></h1>
+    <p>You can also add subheadings with the <code>&lt;strong&gt;</code> and <code>&lt;em&gt;</code></p>
   </div>
 </div>
 
@@ -1080,6 +1082,37 @@
         </div>
       </div>
     </div>
+    <div class="row">
+      <div class="span4 columns">
+        <h2>Tool Tips</h2>
+        <p>Twipsies are super useful for aiding a confused user and pointing them in the right direction.</p>
+      </div>
+      <div class="span12 columns">
+        <div class="twipsies well">
+          <div style="position: relative">
+            <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>
+    </div>
   </div>
 </section>
 
diff --git a/lib/patterns.less b/lib/patterns.less
index 7d330f6ddb..76868e0060 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -506,3 +506,70 @@ div.modal {
     }
   }
 }
+
+// Twipsy
+// ------
+
+div.twipsy {
+  display: block;
+  position: absolute;
+  visibility: visible;
+  padding: 5px;
+  font-size: 10px;
+  z-index: 100000;
+  .opacity(80);
+  &.above {
+    .twipsy-arrow {
+      bottom: 0;
+      left: 50%;
+      margin-left: -5px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid #000;
+    }
+  }
+  &.left {
+    .twipsy-arrow {
+      top: 50%;
+      right: 0;
+      margin-top: -5px;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-left: 5px solid #000;
+    }
+  }
+  &.below {
+    .twipsy-arrow {
+      top:0;
+      left:50%;
+      margin-left: -5px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid #000;
+    }
+  }
+  &.right {
+    .twipsy-arrow {
+      top: 50%;
+      left: 0;
+      margin-top: -5px;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #000;
+    }
+  }
+  .twipsy-inner {
+    padding: 5px 8px 4px;
+    background-color: #000;
+    color: white;
+    text-align: center;
+    max-width: 200px;
+    text-decoration:none;
+    .border-radius(4px);
+  }
+  .twipsy-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+}
\ No newline at end of file