add twipsies...

diff --git a/bootstrap-1.0.0.css b/bootstrap-1.0.0.css
index a902aaba6a82421dc7caf7dbb96a9e291aed6ce0..3046626e701bc1654860ac59142c406864d927ed 100644 (file)
--- a/bootstrap-1.0.0.css
+++ b/bootstrap-1.0.0.css
@@ -1593,3 +1593,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 8650c0f79b8652e30b875007380348c38700bc06..e066d5ba60c888d1beec36f6f4a1352a9fee0744 100644 (file)
--- a/bootstrap-1.0.0.min.css
+++ b/bootstrap-1.0.0.min.css
@@ -197,3 +197,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 8a74c2eb3c54b2d37421a8fd1592f8c1eb812122..8f54c996995d96cd594d8fa2af2b7942d555b988 100644 (file)
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -34,7 +34,7 @@ $(document).ready(function(){
       $(this).parents('.add-on').removeClass('active');
     }
   });
-  
+
   // Disable certain links in docs
   $('ul.tabs a, ul.pills a, .pagination a').click(function(e) {
     e.preventDefault();
@@ -84,4 +84,46 @@ $(document).ready(function(){
   processScroll();
 
   $window.scroll(processScroll);
+
+  // POSITION 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])
+
+  });
+
 });
\ No newline at end of file

diff --git a/docs/index.html b/docs/index.html
index d1b924181966bb14a97035e702a7e1e043c1c0b3..ea6bd178bd5f756f1d2f6279be6b50177e260f06 100644 (file)
--- 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,35 @@
         </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 muted">
+          <div style="position: relative">
+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.
+            <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 7d330f6ddb6521a2d8c464b7091a27eda5177c8b..76868e0060fd241e79a6f6376409866c7c07a605 100644 (file)
--- 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