Merge branch '2.0-wip' of github.com:twitter/bootstrap into 2.0-wip

Conflicts:
	bootstrap.css

Makefile

@@ -31,7 +31,7 @@ uglify:
 		uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\
 		uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\
 		uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\
-		uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\
+		uglifyjs -o js/min/bootstrap-tooltip.js js/bootstrap-tooltip.js;\
 	else \
 		echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \
 		echo "You can install it by running: npm install uglify-js -g"; \

bootstrap.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Jan 11 09:43:04 PST 2012
+ * Date: Wed Jan 11 21:59:22 PST 2012
  */
 html, body {
   margin: 0;
@@ -2214,7 +2214,7 @@ i {
   float: right;
   margin-left: 5px;
 }
-.twipsy {
+.tooltip {
   position: absolute;
   z-index: 1020;
   display: block;
@@ -2225,24 +2225,24 @@ i {
   -moz-opacity: 0;
   opacity: 0;
 }
-.twipsy.in {
+.tooltip.in {
   filter: alpha(opacity=80);
   -moz-opacity: 0.8;
   opacity: 0.8;
 }
-.twipsy.top {
+.tooltip.top {
   margin-top: -2px;
 }
-.twipsy.right {
+.tooltip.right {
   margin-left: 2px;
 }
-.twipsy.bottom {
+.tooltip.bottom {
   margin-top: 2px;
 }
-.twipsy.left {
+.tooltip.left {
   margin-left: -2px;
 }
-.twipsy.top .twipsy-arrow {
+.tooltip.top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
@@ -2250,7 +2250,7 @@ i {
   border-right: 5px solid transparent;
   border-top: 5px solid #000000;
 }
-.twipsy.left .twipsy-arrow {
+.tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
@@ -2258,7 +2258,7 @@ i {
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000000;
 }
-.twipsy.bottom .twipsy-arrow {
+.tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
@@ -2266,7 +2266,7 @@ i {
   border-right: 5px solid transparent;
   border-bottom: 5px solid #000000;
 }
-.twipsy.right .twipsy-arrow {
+.tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
@@ -2274,7 +2274,7 @@ i {
   border-bottom: 5px solid transparent;
   border-right: 5px solid #000000;
 }
-.twipsy-inner {
+.tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
   color: white;
@@ -2285,7 +2285,7 @@ i {
   -moz-border-radius: 4px;
   border-radius: 4px;
 }
-.twipsy-arrow {
+.tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
@@ -2625,6 +2625,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
+.btn-group.open .dropdown-menu.large {
+  top: 40px;
+}
 .btn-group.open .dropdown-toggle {
   background-image: none;
   -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

bootstrap.min.css

@@ -414,17 +414,17 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;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;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;}
 .modal-footer:after{clear:both;}
 .modal-footer .btn{float:right;margin-left:5px;}
-.twipsy{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.twipsy.top{margin-top:-2px;}
-.twipsy.right{margin-left:2px;}
-.twipsy.bottom{margin-top:2px;}
-.twipsy.left{margin-left:-2px;}
-.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
-.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 #000000;}
-.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
-.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 #000000;}
-.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
-.twipsy-arrow{position:absolute;width:0;height:0;}
+.tooltip{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.tooltip.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
+.tooltip.top{margin-top:-2px;}
+.tooltip.right{margin-left:2px;}
+.tooltip.bottom{margin-top:2px;}
+.tooltip.left{margin-left:-2px;}
+.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
+.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
+.tooltip-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
+.tooltip-arrow{position:absolute;width:0;height:0;}
 .popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;}.popover.top{margin-top:-5px;}
 .popover.right{margin-left:5px;}
 .popover.bottom{margin-top:5px;}
@@ -462,7 +462,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;}
 .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;}
 .btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);}
-.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
+.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.btn-group.open .dropdown-menu.large{top:40px;}
 .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);}
 .btn .caret{margin-top:6px;margin-left:0;}
 .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}

docs/assets/css/docs.css

@@ -466,7 +466,7 @@ form.well {
 /* Icons
 ------------------------- */
 .the-icons {
-  
+
 }
 .the-icons i {
   display: block;
@@ -481,6 +481,13 @@ form.well {
   width: 100px;
 }
 
+#javascript input[type='checkbox'] {
+display: inline;
+margin-left: 6px;
+position: relative;
+top: -1px;
+}
+
 
 /* Responsive Docs
 -------------------------------------------------- */

docs/assets/js/application.js

@@ -48,18 +48,18 @@ $(function(){
     setTimeout(function () { $(el).select() }, 0)
   })
 
-  if ($.fn.twipsy) {
+  if ($.fn.tooltip) {
 
     // position static twipsies for components page
     if ($(".twipsies a").length) {
       $(window).on('load resize', function () {
         $(".twipsies a").each(function () {
           $(this)
-            .twipsy({
+            .tooltip({
               placement: $(this).attr('title')
             , trigger: 'manual'
             })
-            .twipsy('show')
+            .tooltip('show')
           })
       })
     }
@@ -67,7 +67,7 @@ $(function(){
     // add tipsies to grid for scaffolding
     if ($('#grid-system').length) {
 
-      $('#grid-system').twipsy({
+      $('#grid-system').tooltip({
           selector: '.show-grid > div'
         , title: function () { return $(this).width() + 'px' }
       })
@@ -75,4 +75,79 @@ $(function(){
     }
   }
 
+  // javascript build logic
+
+  var inputs = $("#javascript input")
+
+  // toggle all plugin checkboxes
+  $('#selectAll').on('click', function (e) {
+    e.preventDefault()
+    inputs.attr('checked', !inputs.is(':checked'))
+  })
+
+  // handle build button dropdown
+  var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () {
+    buildTypes.removeClass('active')
+    $(this).addClass('active')
+  })
+
+  // request built javascript
+  $('#javascriptBuild').on('click', function () {
+
+    var names = $("#javascript input:checked")
+      .map(function () { return this.value })
+      .toArray()
+
+    if (names[names.length - 1] == 'bootstrap-transition.js') {
+      names.unshift(names.pop())
+    }
+
+    $.ajax({
+      type: 'POST'
+    , dataType: 'jsonpi'
+    , params: {
+        branch: '2.0-wip'
+      , dir: 'js'
+      , filenames: names
+      , compress: buildTypes.first().hasClass('active')
+      }
+    , url: "http://bootstrap.herokuapp.com"
+    })
+  })
+
 })
+
+
+// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
+// by the talented Ben Vinegar
+!function($) {
+    $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
+        var url = opts.url;
+
+        return {
+            send: function(_, completeCallback) {
+                var name = 'jQuery_iframe_' + jQuery.now(),
+                    iframe, form;
+
+                iframe = $('<iframe>')
+                    .attr('name', name)
+                    .appendTo('head');
+
+                form = $('<form>')
+                    .attr('method', opts.type) // GET or POST
+                    .attr('action', url)
+                    .attr('target', name);
+
+                $.each(opts.params, function(k, v) {
+                    $('<input>')
+                        .attr('type', 'hidden')
+                        .attr('name', k)
+                        .attr('value', v)
+                        .appendTo(form);
+                });
+
+                form.appendTo('body').submit();
+            }
+       };
+    });
+}(jQuery);
\ No newline at end of file

docs/components.html

@@ -147,7 +147,7 @@
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
-            </div><!-- /btn-group -->        
+            </div><!-- /btn-group -->
             <div class="btn-group">
               <a class="btn primary" href="#">Action</a>
               <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@@ -158,7 +158,7 @@
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>
               </ul>
-            </div><!-- /btn-group -->     
+            </div><!-- /btn-group -->
             <div class="btn-group">
               <a class="btn danger" href="#">Danger</a>
               <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
@@ -214,7 +214,7 @@
       </div>
     </div>
   </section>
-  
+
 
 
 <!-- Nav, Tabs, & Pills
@@ -331,7 +331,7 @@
 <pre class="prettyprint linenums">
 &lt;ul class="nav tabs"&gt;
   &lt;li class="dropdown"&gt;
-    &lt;a class="dropdown-toggle" 
+    &lt;a class="dropdown-toggle"
        data-toggle="dropdown"
        href="#"&gt;
         Dropdown
@@ -363,7 +363,7 @@
 <pre class="prettyprint linenums">
 &lt;ul class="nav pills"&gt;
   &lt;li class="dropdown"&gt;
-    &lt;a class="dropdown-toggle" 
+    &lt;a class="dropdown-toggle"
        data-toggle="dropdown"
        href="#"&gt;
         Dropdown
@@ -483,7 +483,7 @@
       <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
     </div>
   </div>
-    
+
   <h3>Straightforward markup</h3>
   <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
 <pre class="prettyprint linenums">
@@ -509,7 +509,7 @@
     <div class="span4">
       <p>Swap the order of your HTML&mdash;placing <code>.tabs</code> after <code>.tab-content</code>&mdash;for tabs on the bottom.</p>
     </div>
--->   
+-->
     <div class="span4">
       <h4>Tabs on the bottom</h4>
       <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
@@ -1035,7 +1035,7 @@
 </pre>
     </div>
   </div><!-- /row -->
-  
+
   <br>
 
   <!-- Block messages -->
@@ -1195,7 +1195,7 @@
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-tab.js"></script>
     <script src="../js/bootstrap-scrollspy.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-tooltip.js"></script>
     <script src="assets/js/application.js"></script>
   </body>
 </html>

docs/javascript.html

@@ -54,7 +54,6 @@
       </header>
 
 
-
       <!-- Using Javascript w/ Bootstrap
       ================================================== -->
       <section id="javascript">
@@ -63,61 +62,100 @@
         </div>
       <div class="row">
         <div class="span3">
-          <h3><a href="./javascript.html#modals">Modals</a></h3>
-          <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
+          <label>
+            <h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3>
+            <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3>
-          <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
+          <label>
+            <h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3>
+            <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3>
-          <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
+          <label>
+            <h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3>
+            <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3>
-          <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
+          <label>
+            <h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3>
+            <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
+          </label>
         </div>
       </div> <!-- /row -->
       <div class="row">
         <div class="span3">
-          <h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3>
-          <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p>
+          <label>
+            <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3>
+            <p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3>
-          <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
-          <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
+          <label>
+            <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3>
+            <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
+            <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#alerts">Alert messages</a></h3>
-          <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
+          <label>
+            <h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3>
+            <p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#buttons">Buttons</a></h3>
-          <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+          <label>
+            <h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3>
+            <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
+          </label>
         </div>
       </div> <!-- /row -->
       <div class="row">
         <div class="span3">
-          <h3><a href="./javascript.html#collapse">Collapse</a></h3>
-          <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
+          <label>
+            <h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3>
+            <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#carousel">Carousel</a></h3>
-          <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
+          <label>
+            <h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3>
+            <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#typeahead">Typeahead</a></h3>
-          <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
+          <label>
+            <h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3>
+            <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
+          </label>
         </div>
         <div class="span3">
-          <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3>
-          <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
-          <p class="muted"><strong>*</strong> Required for animation in plugins</p>
+          <label>
+            <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3>
+            <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
+            <p class="muted"><strong>*</strong> Required for animation in plugins</p>
+          </label>
         </div>
       </div> <!-- /row -->
+      <div class="row">
+        <div class="span5">
+          <div class="btn-group" id="javascriptBuilder">
+            <a id="javascriptBuild" class="btn primary large" href="#">Download Source</a>
+            <a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#">
+              <span class="caret"></span>
+            </a>
+            <ul class="dropdown-menu large">
+              <li class="active"><a href="#">Compressed</a></li>
+              <li><a href="#">Uncompressed</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
       <hr>
+      <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a>
       <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
     </section>
 
@@ -169,8 +207,8 @@
               <h4>Popover in a modal</h4>
               <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
 
-              <h4>Twipsy tooltips in a modal</h4>
-              <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p>
+              <h4>Tooltips in a modal</h4>
+              <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>
             </div>
             <div class="modal-footer">
               <a href="#" class="btn primary">Save changes</a>
@@ -596,30 +634,29 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
     </section>
 
 
-
-    <!-- Twipsy
+    <!-- Tooltips
     ================================================== -->
-    <section id="twipsy">
+    <section id="tooltips">
       <div class="page-header">
-        <h1>Twipsy <small>bootstrap-twipsy.js</small></h1>
+        <h1>Tooltips <small>bootstrap-tooltip.js</small></h1>
       </div>
       <div class="row">
         <div class="span3 columns">
-          <h3>About Twipsy tooltips</h3>
-          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p>
-          <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a>
+          <h3>About Tooltips</h3>
+          <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
+          <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
-          <h2>Example use of Twipsy</h2>
+          <h2>Example use of Tooltips</h2>
           <p>Hover over the links below to see tooltips:</p>
-          <div class="twipsy-demo well">
-            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
+          <div class="tooltip-demo well">
+            <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
             </p>
           </div>
           <hr>
-          <h2>Using bootstrap-twipsy.js</h2>
-          <p>Trigger the Twipsy tooltips via javascript:</p>
-          <pre class="prettyprint linenums">$('#example').twipsy(options)</pre>
+          <h2>Using bootstrap-tooltip.js</h2>
+          <p>Trigger the tooltip via javascript:</p>
+          <pre class="prettyprint linenums">$('#example').tooltip(options)</pre>
           <h3>Options</h3>
           <table class="bordered-table striped-table">
             <thead>
@@ -647,7 +684,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>selector</td>
                <td>string</td>
                <td>false</td>
-               <td>If a selector is provided, twipsy objects will be delegated to the specified targets.</td>
+               <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
              </tr>
              <tr>
                <td>title</td>
@@ -673,18 +710,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
              </tr>
             </tbody>
           </table>
-          <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
+          <p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p>
           <h3>Markup</h3>
-          <p>For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
+          <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
           <h3>Methods</h3>
-          <h4>$().twipsy(options)</h4>
-          <p>Attaches a twipsy handler to an element collection.</p>
-          <h4>.twipsy('show')</h4>
-          <p>Reveals an elements twipsy.</p>
-          <pre class="prettyprint linenums">$('#element').twipsy('show')</pre>
-          <h4>.twipsy('hide')</h4>
-          <p>Hides an elements twipsy.</p>
-          <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre>
+          <h4>$().tooltip(options)</h4>
+          <p>Attaches a tooltip handler to an element collection.</p>
+          <h4>.tooltip('show')</h4>
+          <p>Reveals an elements tooltip.</p>
+          <pre class="prettyprint linenums">$('#element').tooltip('show')</pre>
+          <h4>.tooltip('hide')</h4>
+          <p>Hides an elements tooltip.</p>
+          <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre>
         </div>
       </div>
     </section>
@@ -701,7 +738,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
         <div class="span3 columns">
           <h3>About popovers</h3>
           <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
-          <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
+          <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p>
           <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a>
         </div>
         <div class="span9 columns">
@@ -741,7 +778,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>selector</td>
                <td>string</td>
                <td>false</td>
-               <td>if a selector is provided, twipsy objects will be delegated to the specified targets</td>
+               <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
              </tr>
              <tr>
                <td>trigger</td>
@@ -776,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
           <h3>Markup</h3>
           <p>
-          For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
+          For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option.
           </p>
           <h3>Methods</h3>
           <h4>$().popover(options)</h4>
@@ -1302,7 +1339,7 @@ $('#myCollapsible').on('hidden', function () {
     <script src="../js/bootstrap-dropdown.js"></script>
     <script src="../js/bootstrap-scrollspy.js"></script>
     <script src="../js/bootstrap-tab.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-tooltip.js"></script>
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-button.js"></script>
     <script src="../js/bootstrap-collapse.js"></script>
@@ -1311,11 +1348,11 @@ $('#myCollapsible').on('hidden', function () {
     <script src="assets/js/application.js"></script>
     <script>
       $(function () {
-        // twipsy demo
-        $('.twipsy-demo.well').twipsy({
-          selector: "a[rel=twipsy]"
+        // tooltip demo
+        $('.tooltip-demo.well').tooltip({
+          selector: "a[rel=tooltip]"
         })
-        $('.twipsy-test').twipsy()
+        $('.tooltip-test').tooltip()
 
         // popover demo
         $("a[rel=popover]")

docs/scaffolding.html

@@ -399,15 +399,15 @@
           </dl>
           <dl class="span2">
             <dt>Javascript plugins</dt>
-            <dd><a href="./javascript.html#transitions">Transitions</a></dd>
-            <dd><a href="./javascript.html#modals">Modals</a></dd>
-            <dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd>
+            <dd><a href="./javascript.html#transition">Transition</a></dd>
+            <dd><a href="./javascript.html#modal">Modal</a></dd>
+            <dd><a href="./javascript.html#dropdown">Dropdown</a></dd>
             <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd>
-            <dd><a href="./javascript.html#tabs">Tabs</a></dd>
-            <dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd>
-            <dd><a href="./javascript.html#popovers">Popovers</a></dd>
-            <dd><a href="./javascript.html#alerts">Alerts</a></dd>
-            <dd><a href="./javascript.html#buttons">Buttons</a></dd>
+            <dd><a href="./javascript.html#tab">Tab</a></dd>
+            <dd><a href="./javascript.html#tooltip">Tooltip</a></dd>
+            <dd><a href="./javascript.html#popover">Popover</a></dd>
+            <dd><a href="./javascript.html#alerts">Alert</a></dd>
+            <dd><a href="./javascript.html#buttons">Button</a></dd>
             <dd><a href="./javascript.html#collapse">Collapse</a></dd>
             <dd><a href="./javascript.html#carousel">Carousel</a></dd>
             <dd><a href="./javascript.html#typeahead">Typeahead</a></dd>
@@ -433,7 +433,7 @@
     <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
     <script src="assets/js/google-code-prettify/prettify.js"></script>
     <script src="../js/bootstrap-transition.js"></script>
-    <script src="../js/bootstrap-twipsy.js"></script>
+    <script src="../js/bootstrap-tooltip.js"></script>
     <script src="assets/js/application.js"></script>
 
   </body>

js/bootstrap-popover.js

@@ -26,10 +26,10 @@
     this.init('popover', element, options)
   }
 
-  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js
-     ========================================= */
+  /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
+     ========================================== */
 
-  Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, {
+  Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
 
     constructor: Popover
 
@@ -86,7 +86,7 @@
 
   $.fn.popover.Constructor = Popover
 
-  $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
+  $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
     placement: 'right'
   , content: ''
   , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>'

js/bootstrap-twipsy.js → js/bootstrap-tooltip.js

-/* ==========================================================
- * bootstrap-twipsy.js v2.0.0
- * http://twitter.github.com/bootstrap/javascript.html#twipsy
+/* ===========================================================
+ * bootstrap-tooltip.js v2.0.0
+ * http://twitter.github.com/bootstrap/javascript.html#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
- * ==========================================================
+ * ===========================================================
  * Copyright 2011 Twitter, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,16 +22,16 @@
 
   "use strict"
 
- /* TWIPSY PUBLIC CLASS DEFINITION
-  * ============================== */
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+  * =============================== */
 
-  var Twipsy = function ( element, options ) {
-    this.init('twipsy', element, options)
+  var Tooltip = function ( element, options ) {
+    this.init('tooltip', element, options)
   }
 
-  Twipsy.prototype = {
+  Tooltip.prototype = {
 
-    constructor: Twipsy
+    constructor: Tooltip
 
   , init: function ( type, element, options ) {
       var eventIn
@@ -154,7 +154,7 @@
 
   , setContent: function () {
       var $tip = this.tip()
-      $tip.find('.twipsy-inner').html(this.getTitle())
+      $tip.find('.tooltip-inner').html(this.getTitle())
       $tip.removeClass('fade in top bottom left right')
     }
 
@@ -242,29 +242,29 @@
   }
 
 
- /* TWIPSY PLUGIN DEFINITION
-  * ======================== */
+ /* TOOLTIP PLUGIN DEFINITION
+  * ========================= */
 
-  $.fn.twipsy = function ( option ) {
+  $.fn.tooltip = function ( option ) {
     return this.each(function () {
       var $this = $(this)
-        , data = $this.data('twipsy')
+        , data = $this.data('tooltip')
         , options = typeof option == 'object' && option
-      if (!data) $this.data('twipsy', (data = new Twipsy(this, options)))
+      if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
       if (typeof option == 'string') data[option]()
     })
   }
 
-  $.fn.twipsy.Constructor = Twipsy
+  $.fn.tooltip.Constructor = Tooltip
 
-  $.fn.twipsy.defaults = {
+  $.fn.tooltip.defaults = {
     animation: true
   , delay: 0
   , selector: false
   , placement: 'top'
   , trigger: 'hover'
   , title: ''
-  , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'
+  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
   }
 
 }( window.jQuery )
\ No newline at end of file

js/bootstrap-typeahead.js

@@ -156,11 +156,13 @@
           break
 
         case 38: // up arrow
+          if (!this.shown) return
           e.preventDefault()
           this.prev()
           break
 
         case 40: // down arrow
+          if (!this.shown) return
           e.preventDefault()
           this.next()
           break

js/tests/index.html

@@ -20,7 +20,7 @@
   <script src="../../js/bootstrap-modal.js"></script>
   <script src="../../js/bootstrap-scrollspy.js"></script>
   <script src="../../js/bootstrap-tab.js"></script>
-  <script src="../../js/bootstrap-twipsy.js"></script>
+  <script src="../../js/bootstrap-tooltip.js"></script>
   <script src="../../js/bootstrap-popover.js"></script>
   <script src="../../js/bootstrap-typeahead.js"></script>
 
@@ -33,7 +33,7 @@
   <script src="unit/bootstrap-modal.js"></script>
   <script src="unit/bootstrap-scrollspy.js"></script>
   <script src="unit/bootstrap-tab.js"></script>
-  <script src="unit/bootstrap-twipsy.js"></script>
+  <script src="unit/bootstrap-tooltip.js"></script>
   <script src="unit/bootstrap-popover.js"></script>
   <script src="unit/bootstrap-typeahead.js"></script>
 

js/tests/unit/bootstrap-twipsy.js

 $(function () {
 
-    module("bootstrap-twipsy")
+    module("bootstrap-tooltip")
 
       test("should be defined on jquery object", function () {
         var div = $("<div></div>")
-        ok(div.twipsy, 'popover method is defined')
+        ok(div.tooltip, 'popover method is defined')
       })
 
       test("should return element", function () {
         var div = $("<div></div>")
-        ok(div.twipsy() == div, 'document.body returned')
+        ok(div.tooltip() == div, 'document.body returned')
       })
 
       test("should expose default settings", function () {
-        ok(!!$.fn.twipsy.defaults, 'defaults is defined')
+        ok(!!$.fn.tooltip.defaults, 'defaults is defined')
       })
 
       test("should remove title attribute", function () {
-        var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
-        ok(!twipsy.attr('title'), 'title tag was removed')
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
+        ok(!tooltip.attr('title'), 'title tag was removed')
       })
 
       test("should add data attribute for referencing original title", function () {
-        var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy()
-        equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute')
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
+        equals(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
       })
 
       test("should place tooltips relative to placement option", function () {
         $.support.transition = false
-        var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
           .appendTo('#qunit-fixture')
-          .twipsy({placement: 'bottom'})
-          .twipsy('show')
+          .tooltip({placement: 'bottom'})
+          .tooltip('show')
 
-        ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied')
-        twipsy.twipsy('hide')
+        ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied')
+        tooltip.tooltip('hide')
       })
 
       test("should always allow html entities", function () {
         $.support.transition = false
-        var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
+        var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
           .appendTo('#qunit-fixture')
-          .twipsy('show')
+          .tooltip('show')
 
-        ok($('.twipsy b').length, 'b tag was inserted')
-        twipsy.twipsy('hide')
-        ok(!$(".twipsy").length, 'twipsy removed')
+        ok($('.tooltip b').length, 'b tag was inserted')
+        tooltip.tooltip('hide')
+        ok(!$(".tooltip").length, 'tooltip removed')
       })
 
       test("should respect custom classes", function () {
-        var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
+        var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
           .appendTo('#qunit-fixture')
-          .twipsy({ template: '<div class="twipsy some-class"><div class="twipsy-arrow"/><div class="twipsy-inner"/></div>'})
-          .twipsy('show')
+          .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
+          .tooltip('show')
 
-        ok($('.twipsy').hasClass('some-class'), 'custom class is present')
-        twipsy.twipsy('hide')
-        ok(!$(".twipsy").length, 'twipsy removed')
+        ok($('.tooltip').hasClass('some-class'), 'custom class is present')
+        tooltip.tooltip('hide')
+        ok(!$(".tooltip").length, 'tooltip removed')
       })
 
 })
\ No newline at end of file

lib/bootstrap.less

@@ -39,7 +39,7 @@
 
 // Components: Popovers
 @import "modals.less";
-@import "twipsy.less";
+@import "tooltip.less";
 @import "popovers.less";
 
 // Components: Buttons & Alerts

lib/button-groups.less

@@ -90,6 +90,7 @@
   display: block;
   top: 30px;
   .border-radius(5px);
+  &.large { top: 40px; }
 }
 .btn-group.open .dropdown-toggle {
   background-image: none;

lib/twipsy.less → lib/tooltip.less

-// TWIPSY
-// ------
+// TOOLTIP
+// ------=
 
-.twipsy {
+.tooltip {
   position: absolute;
-  z-index: @zindexTwipsy;
+  z-index: @zindexTooltip;
   display: block;
   visibility: visible;
   padding: 5px;
@@ -14,12 +14,12 @@
   &.right  { margin-left:  2px; }
   &.bottom { margin-top:   2px; }
   &.left   { margin-left: -2px; }
-  &.top .twipsy-arrow    { #popoverArrow > .top(); }
-  &.left .twipsy-arrow   { #popoverArrow > .left(); }
-  &.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
-  &.right .twipsy-arrow  { #popoverArrow > .right(); }
+  &.top .tooltip-arrow    { #popoverArrow > .top(); }
+  &.left .tooltip-arrow   { #popoverArrow > .left(); }
+  &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
+  &.right .tooltip-arrow  { #popoverArrow > .right(); }
 }
-.twipsy-inner {
+.tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
   color: white;
@@ -28,7 +28,7 @@
   background-color: @black;
   .border-radius(4px);
 }
-.twipsy-arrow {
+.tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;

lib/variables.less

@@ -52,7 +52,7 @@
 
 @zindexDropdown:        1000;
 @zindexPopover:         1010;
-@zindexTwipsy:          1020;
+@zindexTooltip:         1020;
 @zindexFixedNavbar:     1030;
 @zindexModalBackdrop:   1040;
 @zindexModal:           1050;