Merge branch '2.1.0-wip' of https://github.com/twitter/bootstrap into respclasses

docs/assets/css/bootstrap-responsive.css

@@ -362,6 +362,9 @@
   .uneditable-input {
     margin-left: 0;
   }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 30px;
+  }
   input.span12,
   textarea.span12,
   .uneditable-input.span12 {
@@ -704,6 +707,9 @@
   .uneditable-input {
     margin-left: 0;
   }
+  .controls-row [class*="span"] + [class*="span"] {
+    margin-left: 20px;
+  }
   input.span12,
   textarea.span12,
   .uneditable-input.span12 {
@@ -798,6 +804,9 @@
   .thumbnails {
     margin-left: 0;
   }
+  .thumbnails > li {
+    float: none;
+  }
   [class*="span"],
   .row-fluid [class*="span"] {
     display: block;

docs/assets/css/docs.css

@@ -598,6 +598,17 @@ form.bs-docs-example {
   line-height: 18px;
 }
 
+/* Tooltips */
+.bs-docs-tooltip-examples {
+  text-align: center;
+  margin: 0 0 10px;
+  list-style: none;
+}
+.bs-docs-tooltip-examples li {
+  display: inline;
+  padding: 0 10px;
+}
+
 /* Popovers */
 .bs-docs-example-popover {
   padding-bottom: 24px;
@@ -607,8 +618,8 @@ form.bs-docs-example {
   position: relative;
   display: block;
   float: left;
-  width: 210px;
-  margin: 10px;
+  width: 260px;
+  margin: 20px;
 }
 
 

docs/extend.html

@@ -68,96 +68,109 @@
 
     <div class="container">
 
-<!-- Masthead
+<!-- Subhead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Extending Bootstrap</h1>
-  <p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
-  <div class="navbar navbar-subnav">
-    <div class="navbar-inner">
-      <ul class="nav">
-        <li><a href="#builtWith">Built with Less</a></li>
-        <li><a href="#compiling">Compiling Bootstrap</a></li>
-      </ul>
-    </div>
-  </div>
+  <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
 </header>
 
 
 
-<!-- BUILT WITH LESS
+<!-- Docs nav
 ================================================== -->
-<section id="builtWith">
-  <div class="page-header">
-    <h1>Built with LESS</h1>
+<div class="row">
+  <div class="span3 bs-docs-sidebar">
+    <ul class="nav nav-list bs-docs-sidenav">
+      <li><a href="#built-with-less">Built with LESS</a></li>
+      <li><a href="#compiling">Compiling Bootstrap</a></li>
+      <li><a href="#static-assets">Use as static assets</a></li>
+    </ul>
   </div>
+  <div class="span9">
 
-  <h3>Why LESS?</h3>
-  <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
 
-  <h3>What's included?</h3>
-  <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
 
-  <h3>Learn more</h3>
-  <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
-  <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
+    <!-- BUILT WITH LESS
+    ================================================== -->
+    <section id="built-with-less">
+      <div class="page-header">
+        <h1>Built with LESS</h1>
+      </div>
 
-  <h3><a href="#variables">Variables</a></h3>
-  <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
+      <h3>Why LESS?</h3>
+      <p>Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, <a href="http://cloudhead.io">Alexis Sellier</a>. It makes developing systems-based CSS faster, easier, and more fun.</p>
 
-  <h3><a href="#mixins">Mixins</a></h3>
-  <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+      <h3>What's included?</h3>
+      <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
 
-  <h3>Operations</h3>
-  <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.</p>
-</section>
+      <h3>Learn more</h3>
+      <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+      <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
+    </section>
 
 
 
-<!-- COMPILING LESS AND BOOTSTRAP
-================================================== -->
-<section id="compiling">
-  <div class="page-header">
-    <h1>Compiling Bootstrap with LESS</h1>
-  </div>
-  <div class="alert alert-info">
-    <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
-  </div>
+    <!-- COMPILING LESS AND BOOTSTRAP
+    ================================================== -->
+    <section id="compiling">
+      <div class="page-header">
+        <h1>Compiling Bootstrap with LESS</h1>
+      </div>
+      <div class="alert alert-info">
+        <strong>Note:</strong> If you're submitting a pull request to GitHub with modified CSS, you <strong>must</strong> recompile the CSS via any of these methods.
+      </div>
 
-  <h2>Tools for compiling</h2>
+      <h2>Tools for compiling</h2>
 
-  <h3>Node with makefile</h3>
-  <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
-  <pre>$ npm install -g less jshint recess uglify-js</pre>
-  <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
-  <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
+      <h3>Node with makefile</h3>
+      <p>Install the LESS command line compiler, JSHint, Recess, and uglify-js globally with npm by running the following command:</p>
+      <pre>$ npm install -g less jshint recess uglify-js</pre>
+      <p>Once installed just run <code>make</code> from the root of your bootstrap directory and you're all set.</p>
+      <p>Additionally, if you have <a href="https://github.com/mynyml/watchr">watchr</a> installed, you may run <code>make watch</code> to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).</p>
 
-  <h3>Command line</h3>
-  <p>Install the LESS command line tool via Node and run the following command:</p>
-    <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
-  <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
+      <h3>Command line</h3>
+      <p>Install the LESS command line tool via Node and run the following command:</p>
+      <pre>$ lessc ./less/bootstrap.less > bootstrap.css</pre>
+      <p>Be sure to include <code>--compress</code> in that command if you're trying to save some bytes!</p>
 
-  <h3>Javascript</h3>
-  <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
+      <h3>Javascript</h3>
+      <p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and Bootstrap) in the <code>&lt;head&gt;</code>.</p>
 <pre class="prettyprint">
 &lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
 &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
 </pre>
-  <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
+      <p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
 
-  <h3>Unofficial Mac app</h3>
-  <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
-  <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
+      <h3>Unofficial Mac app</h3>
+      <p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
+      <p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
 
-  <h3>More Mac apps</h3>
-  <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
-  <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
-  <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
-  <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
-  <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
-  <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
+      <h3>More Mac apps</h3>
+      <h4><a href="http://crunchapp.net/" target="_blank">Crunch</a></h4>
+      <p>Crunch is a great looking LESS editor and compiler built on Adobe Air.</p>
+      <h4><a href="http://incident57.com/codekit/" target="_blank">CodeKit</a></h4>
+      <p>Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.</p>
+      <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
+      <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
 
-</section>
+    </section>
+
+
+
+    <!-- Static assets
+    ================================================== -->
+    <section id="static-assets">
+      <div class="page-header">
+        <h1>Use as static assets</h1>
+      </div>
+      <p>...</p>
+    </section>
+
+
+
+  </div>
+</div>
 
 
      <!-- Footer

less/buttons.less

@@ -15,12 +15,10 @@
   font-size: 13px;
   line-height: 20px;
   *line-height: 20px;
-  color: @grayDark;
   text-align: center;
-  text-shadow: 0 1px 1px rgba(255,255,255,.75);
   vertical-align: middle;
   cursor: pointer;
-  .buttonBackground(@btnBackground, @btnBackgroundHighlight);
+  .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: 1px solid @btnBorder;
   *border: 0; // Remove the border to prevent IE7's black border on input:focus
   border-bottom-color: darken(@btnBorder, 10%);
@@ -105,23 +103,6 @@
 // Alternate buttons
 // --------------------------------------------------
 
-// Set text color
-// -------------------------
-.btn-primary,
-.btn-primary:hover,
-.btn-warning,
-.btn-warning:hover,
-.btn-danger,
-.btn-danger:hover,
-.btn-success,
-.btn-success:hover,
-.btn-info,
-.btn-info:hover,
-.btn-inverse,
-.btn-inverse:hover {
-  color: @white;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-}
 // Provide *some* extra contrast for those who can get it
 .btn-primary.active,
 .btn-warning.active,

less/forms.less

@@ -22,7 +22,7 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @baseLineHeight * 1.5;
+  margin-bottom: @baseLineHeight;
   font-size: @baseFontSize * 1.5;
   line-height: @baseLineHeight * 2;
   color: @grayDark;
@@ -290,8 +290,18 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
+// Grid sizes
 #grid > .input(@gridColumnWidth, @gridGutterWidth);
 
+// Control row for multiple inputs per line
+.controls-row {
+  .clearfix(); // Clear the float from controls
+}
+.controls-row [class*="span"] {
+  float: left; // Float to collapse white-space for proper grid alignment
+}
+
+
 
 
 // DISABLED STATE
@@ -389,8 +399,8 @@ select:focus:required:invalid {
 // ------------
 
 // Allow us to put symbols and text within the input field for a cleaner look
-.input-prepend,
-.input-append {
+.input-append,
+.input-prepend {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap; // Prevent span and input from separating
@@ -479,15 +489,34 @@ select:focus:required:invalid {
 // SEARCH FORM
 // -----------
 
-input.search-query {
+.search-query {
   padding-right: 14px;
   padding-right: 4px \9;
   padding-left: 14px;
   padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
-  margin-bottom: 0; // remove the default margin on all inputs
+  margin-bottom: 0; // Remove the default margin on all inputs
   .border-radius(14px);
 }
 
+/* Allow for input prepend/append in search forms */
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  .border-radius(0); // Override due to specificity
+}
+.form-search .input-append .search-query {
+  .border-radius(14px 0 0 14px)
+}
+.form-search .input-append .btn {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .search-query {
+  .border-radius(0 14px 14px 0)
+}
+.form-search .input-prepend .btn {
+  .border-radius(14px 0 0 14px)
+}
+
+
 
 
 // HORIZONTAL & VERTICAL FORMS

less/mixins.less

@@ -389,7 +389,9 @@
 }
 
 // Gradient Bar Colors for buttons and alerts
-.gradientBar(@primaryColor, @secondaryColor) {
+.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
+  color: @textColor;
+  text-shadow: @textShadow;
   #gradient > .vertical(@primaryColor, @secondaryColor);
   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
@@ -481,14 +483,15 @@
 
 // Button backgrounds
 // ------------------
-.buttonBackground(@startColor, @endColor) {
+.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
   // gradientBar will set the background to a pleasing blend of these, to support IE<=9
-  .gradientBar(@startColor, @endColor);
+  .gradientBar(@startColor, @endColor, @textColor, @textShadow);
   *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
   .reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
   &:hover, &:active, &.active, &.disabled, &[disabled] {
+    color: @textColor;
     background-color: @endColor;
     *background-color: darken(@endColor, 5%);
   }
@@ -508,75 +511,7 @@
   margin-top: (@navbarHeight - @elementHeight) / 2;
 }
 
-// Popover arrows
-// -------------------------
-// For tipsies and popovers
-#popoverArrow {
-  .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    bottom: -@arrowWidth;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-top: @arrowWidth solid #ccc;
-    border-top: @arrowWidth solid @color;
-    &:after {
-      border-left: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid transparent;
-      border-top: @arrowWidth - 1 solid #fff;
-      bottom: 1px;
-      left: -@arrowWidth + 1;
-    }
-  }
-  .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: 50%;
-    left: -@arrowWidth;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid #ccc;
-    border-right: @arrowWidth solid @color;
-    &:after {
-      border-top: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid #fff;
-      bottom: -@arrowWidth + 1;
-      left: 1px;
-    }
-  }
-  .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: -@arrowWidth;
-    left: 50%;
-    margin-left: -@arrowWidth;
-    border-left: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid #ccc;
-    border-bottom: @arrowWidth solid @color;
-    &:after {
-      border-left: @arrowWidth - 1 solid transparent;
-      border-right: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid #f5f5f5;
-      top: 1px;
-      left: -@arrowWidth + 1;
-    }
-  }
-  .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
-    top: 50%;
-    right: -@arrowWidth;
-    margin-top: -@arrowWidth;
-    border-top: @arrowWidth solid transparent;
-    border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid #ccc;
-    border-left: @arrowWidth solid @color;
-    &:after {
-      border-top: @arrowWidth - 1 solid transparent;
-      border-bottom: @arrowWidth - 1 solid transparent;
-      border-left: @arrowWidth - 1 solid #fff;
-      bottom: -@arrowWidth + 1;
-      right: 1px;
-    }
-  }
-}
+
 
 // Grid System
 // -----------
@@ -721,6 +656,11 @@
       margin-left: 0; // override margin-left from core grid system
     }
 
+    // Space grid-sized controls properly if multiple per line
+    .controls-row [class*="span"] + [class*="span"] {
+      margin-left: @gridGutterWidth;
+    }
+
     // generate .spanX
     .spanX (@gridColumns);
 

less/navbar.less

@@ -72,7 +72,7 @@
   // Buttons in navbar
   .btn,
   .btn-group {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
+    .navbarVerticalAlign(28px); // Vertically center in navbar
   }
   .btn-group .btn {
     margin: 0; // then undo the margin here so we don't accidentally double it
@@ -87,10 +87,11 @@
   select,
   .radio,
   .checkbox {
-    .navbarVerticalAlign(30px); // Vertically center in navbar
+    .navbarVerticalAlign(28px); // Vertically center in navbar
   }
   input,
-  select {
+  select,
+  .btn {
     display: inline-block;
     margin-bottom: 0;
   }

less/popovers.less

@@ -9,7 +9,7 @@
   left: 0;
   z-index: @zindexPopover;
   display: none;
-  width: 218px;
+  width: 238px;
   background-color: #fff;
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
@@ -25,34 +25,16 @@
   &.bottom  { margin-top: 10px; }
   &.left    { margin-right: 10px; }
 
-  // Call the mixin for the arrows
-  &.top .arrow    { #popoverArrow > .top(); }
-  &.right .arrow  { #popoverArrow > .right(); }
-  &.bottom .arrow { #popoverArrow > .bottom(); }
-  &.left .arrow   { #popoverArrow > .left();  }
-
-  // Common arrow styles
-  .arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    &:after {
-      position: absolute;
-      display: inline-block;
-      width: 0;
-      height: 0;
-      content: "";
-    }
-  }
 }
 
 .popover-title {
+  margin: 0; // reset heading margin
   padding: 8px 14px;
   font-size: 14px;
   font-weight: normal;
   line-height: 18px;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #e5e5e5;
+  background-color: @popoverTitleBackground;
+  border-bottom: 1px solid darken(@popoverTitleBackground, 10%);
   .border-radius(5px 5px 0 0);
 }
 
@@ -62,3 +44,73 @@
     margin-bottom: 0;
   }
 }
+
+// Arrows
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover .arrow:after {
+  content: "";
+  z-index: -1;
+}
+
+.popover {
+  &.top .arrow {
+    bottom: -@popoverArrowWidth;
+    left: 50%;
+    margin-left: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth @popoverArrowWidth 0;
+    border-top-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
+      border-top-color: @popoverArrowOuterColor;
+      bottom: -1px;
+      left: -@popoverArrowOuterWidth;
+    }
+  }
+  &.right .arrow {
+    top: 50%;
+    left: -@popoverArrowWidth;
+    margin-top: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
+    border-right-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
+      border-right-color: @popoverArrowOuterColor;
+      bottom: -@popoverArrowOuterWidth;
+      left: -1px;
+    }
+  }
+  &.bottom .arrow {
+    top: -@popoverArrowWidth;
+    left: 50%;
+    margin-left: -@popoverArrowWidth;
+    border-width: 0 @popoverArrowWidth @popoverArrowWidth;
+    border-bottom-color: @popoverTitleBackground;
+    &:after {
+      border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
+      border-bottom-color: @popoverArrowOuterColor;
+      top: -1px;
+      left: -@popoverArrowOuterWidth;
+    }
+  }
+  &.left .arrow {
+    top: 50%;
+    right: -@popoverArrowWidth;
+    margin-top: -@popoverArrowWidth;
+    border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
+    border-left-color: @popoverArrowColor;
+    &:after {
+      border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
+      border-left-color: @popoverArrowOuterColor;
+      bottom: -@popoverArrowOuterWidth;
+      right: -1px;
+    }
+  }
+}

less/responsive-767px-max.less

@@ -51,6 +51,9 @@
   .thumbnails {
     margin-left: 0;
   }
+  .thumbnails > li {
+    float: none;
+  }
   // Make all grid-sized elements block level again
   [class*="span"],
   .row-fluid [class*="span"] {

less/scaffolding.less

@@ -4,7 +4,7 @@
 
 
 // Body reset
-// ----------
+// -------------------------
 
 body {
   margin: 0;
@@ -17,7 +17,7 @@ body {
 
 
 // Links
-// -----
+// -------------------------
 
 a {
   color: @linkColor;

less/tooltip.less

@@ -3,6 +3,7 @@
 // --------------------------------------------------
 
 
+// Base class
 .tooltip {
   position: absolute;
   z-index: @zindexTooltip;
@@ -12,26 +13,58 @@
   font-size: 11px;
   .opacity(0);
   &.in     { .opacity(80); }
-  &.top    { margin-top:  -2px; }
-  &.right  { margin-left:  2px; }
-  &.bottom { margin-top:   2px; }
-  &.left   { margin-left: -2px; }
-  &.top .tooltip-arrow    { #popoverArrow > .top(); }
-  &.left .tooltip-arrow   { #popoverArrow > .left(); }
-  &.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
-  &.right .tooltip-arrow  { #popoverArrow > .right(); }
+  &.top    { margin-top:  -3px; }
+  &.right  { margin-left:  3px; }
+  &.bottom { margin-top:   3px; }
+  &.left   { margin-left: -3px; }
 }
+
+// Wrapper for the tooltip content
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: @white;
+  color: @tooltipColor;
   text-align: center;
   text-decoration: none;
-  background-color: @black;
+  background-color: @tooltipBackground;
   .border-radius(4px);
 }
+
+// Arrows
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
+    border-top-color: @tooltipArrowColor;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
+    border-right-color: @tooltipArrowColor;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -@tooltipArrowWidth;
+    border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
+    border-left-color: @tooltipArrowColor;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -@tooltipArrowWidth;
+    border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
+    border-bottom-color: @tooltipArrowColor;
+  }
 }

less/variables.less

@@ -198,6 +198,22 @@
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
 
 
+// Tooltips and popovers
+// -------------------------
+@tooltipColor:            #fff;
+@tooltipBackground:       #000;
+@tooltipArrowWidth:       5px;
+@tooltipArrowColor:       @tooltipBackground;
+
+@popoverArrowWidth:       10px;
+@popoverArrowColor:       #fff;
+@popoverTitleBackground:  #f5f5f5;
+
+// Special enhancement for popovers
+@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
+@popoverArrowOuterColor:  rgba(0,0,0,.2);
+
+
 
 // GRID
 // --------------------------------------------------