Merge pull request #43 from twbs/popover-arrow

rename .arrow => .popover-arrow

10 files changed, 202 insertions, 213 deletions

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 4890b50a7..056bd96a6 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -447,7 +447,7 @@ ul ul, ul ol, ol ul, ol ol {
   margin-bottom: 0;
 }
 
-.list-unstyled, .nav {
+.list-unstyled, .list-inline, .nav {
   padding-left: 0;
   list-style: none;
 }
@@ -607,7 +607,7 @@ pre code {
 }
 @media (min-width: 34em) {
   .container {
-    max-width: 34em;
+    max-width: 34rem;
   }
 }
 @media (min-width: 48em) {
@@ -620,6 +620,11 @@ pre code {
     max-width: 60rem;
   }
 }
+@media (min-width: 75em) {
+  .container {
+    max-width: 72.25rem;
+  }
+}
 
 .container-fluid {
   padding-right: .75rem; 
@@ -647,7 +652,7 @@ pre code {
   clear: both;
 }
 
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xl-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xl-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xl-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xl-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xl-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xl-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xl-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xl-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xl-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xl-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12, .col-xl-12 {
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
   position: relative;
   min-height: 1px;
   padding-right: .75rem; 
@@ -1492,7 +1497,7 @@ pre code {
   }
 }
 
-@media (min-width: 62em) {
+@media (min-width: 75em) {
   .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
     float: left;
   }
@@ -2726,7 +2731,7 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
   z-index: 990;
 }
 
-.pull-right > .dropdown-menu, .navbar-right > .dropdown-menu {
+.pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
@@ -3247,7 +3252,12 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto
 }
 
 @media (min-width: 34em) {
+  .navbar-left {
+    float: left !important;
+  }
+
   .navbar-right {
+    float: right !important;
     margin-right: -1rem;
   }
   .navbar-right ~ .navbar-right {
@@ -3752,7 +3762,7 @@ a.label:hover, a.label:focus {
 .badge:empty {
   display: none;
 }
-.badge.pull-left, .badge.navbar-left, .badge.pull-right, .badge.navbar-right {
+.badge.pull-left, .badge.pull-right {
   top: .2em;
 }
 .list-group-item.active > .badge, .nav-pills > .active > a > .badge {
@@ -4084,11 +4094,11 @@ a.badge:hover, a.badge:focus {
   display: block;
 }
 
-.media-right, .media > .pull-right, .media > .navbar-right {
+.media-right, .media > .pull-right {
   padding-left: 10px;
 }
 
-.media-left, .media > .pull-left, .media > .navbar-left {
+.media-left, .media > .pull-left {
   padding-right: 10px;
 }
 
@@ -4467,19 +4477,23 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
 .tooltip.in {
   opacity: .9;
 }
-.tooltip.top {
+
+.tooltip-top {
   padding: 5px 0;
   margin-top: -3px;
 }
-.tooltip.right {
+
+.tooltip-right {
   padding: 0 5px;
   margin-left: 3px;
 }
-.tooltip.bottom {
+
+.tooltip-bottom {
   padding: 5px 0;
   margin-top: 3px;
 }
-.tooltip.left {
+
+.tooltip-left {
   padding: 0 5px;
   margin-left: -3px;
 }
@@ -4502,62 +4516,37 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   border-style: solid;
 }
 
-.tooltip.top .tooltip-arrow {
+.tooltip-top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #000;
 }
-.tooltip.top-left .tooltip-arrow {
-  right: 5px;
-  bottom: 0;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000;
-}
-.tooltip.top-right .tooltip-arrow {
-  bottom: 0;
-  left: 5px;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000;
-}
-.tooltip.right .tooltip-arrow {
+
+.tooltip-right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
   border-right-color: #000;
 }
-.tooltip.left .tooltip-arrow {
+
+.tooltip-left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
   border-left-color: #000;
 }
-.tooltip.bottom .tooltip-arrow {
+
+.tooltip-bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000;
 }
-.tooltip.bottom-left .tooltip-arrow {
-  top: 0;
-  right: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
-.tooltip.bottom-right .tooltip-arrow {
-  top: 0;
-  left: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000;
-}
 
 .popover {
   position: absolute;
@@ -4581,16 +4570,20 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
           box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
 }
-.popover.top {
+
+.popover-top {
   margin-top: -10px;
 }
-.popover.right {
+
+.popover-right {
   margin-left: 10px;
 }
-.popover.bottom {
+
+.popover-bottom {
   margin-top: 10px;
 }
-.popover.left {
+
+.popover-left {
   margin-left: -10px;
 }
 
@@ -4607,7 +4600,7 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   padding: 9px 14px;
 }
 
-.popover > .arrow, .popover > .arrow:after {
+.popover-arrow, .popover-arrow:after {
   position: absolute;
   display: block;
   width: 0;
@@ -4616,65 +4609,68 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   border-style: solid;
 }
 
-.popover > .arrow {
+.popover-arrow {
   border-width: 11px;
 }
 
-.popover > .arrow:after {
+.popover-arrow:after {
   content: "";
   border-width: 10px;
 }
 
-.popover.top > .arrow {
+.popover-top > .popover-arrow {
   bottom: -11px;
   left: 50%;
   margin-left: -11px;
   border-top-color: rgba(0, 0, 0, .25);
   border-bottom-width: 0;
 }
-.popover.top > .arrow:after {
+.popover-top > .popover-arrow:after {
   bottom: 1px;
   margin-left: -10px;
   content: "";
   border-top-color: #fff;
   border-bottom-width: 0;
 }
-.popover.right > .arrow {
+
+.popover-right > .popover-arrow {
   top: 50%;
   left: -11px;
   margin-top: -11px;
   border-right-color: rgba(0, 0, 0, .25);
   border-left-width: 0;
 }
-.popover.right > .arrow:after {
+.popover-right > .popover-arrow:after {
   bottom: -10px;
   left: 1px;
   content: "";
   border-right-color: #fff;
   border-left-width: 0;
 }
-.popover.bottom > .arrow {
+
+.popover-bottom > .popover-arrow {
   top: -11px;
   left: 50%;
   margin-left: -11px;
   border-top-width: 0;
   border-bottom-color: rgba(0, 0, 0, .25);
 }
-.popover.bottom > .arrow:after {
+.popover-bottom > .popover-arrow:after {
   top: 1px;
   margin-left: -10px;
   content: "";
   border-top-width: 0;
   border-bottom-color: #fff;
 }
-.popover.left > .arrow {
+
+.popover-left > .popover-arrow {
   top: 50%;
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;
   border-left-color: rgba(0, 0, 0, .25);
 }
-.popover.left > .arrow:after {
+.popover-left > .popover-arrow:after {
   right: 1px;
   bottom: -10px;
   content: "";
@@ -4901,11 +4897,11 @@ a.list-group-item-state.active, a.list-group-item-state.active:hover, a.list-gro
   margin-left: auto;
 }
 
-.pull-right, .navbar-right {
+.pull-right {
   float: right !important;
 }
 
-.pull-left, .navbar-left {
+.pull-left {
   float: left !important;
 }
 
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index ab33baccb..4557a44a4 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -39,24 +39,24 @@ $(function () {
   <h3>Static popover</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-popover">
-    <div class="popover top">
-      <div class="arrow"></div>
+    <div class="popover popover-top">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover top</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
       </div>
     </div>
 
-    <div class="popover right">
-      <div class="arrow"></div>
+    <div class="popover popover-right">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover right</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
       </div>
     </div>
 
-    <div class="popover bottom">
-      <div class="arrow"></div>
+    <div class="popover popover-bottom">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover bottom</h3>
 
       <div class="popover-content">
@@ -64,8 +64,8 @@ $(function () {
       </div>
     </div>
 
-    <div class="popover left">
-      <div class="arrow"></div>
+    <div class="popover popover-left">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover left</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
         <tr>
           <td>template</td>
           <td>string</td>
-          <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+          <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
           <td>
             <p>Base HTML to use when creating the popover.</p>
             <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
             <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-            <p><code>.arrow</code> will become the popover's arrow.</p>
+            <p><code>.popover-arrow</code> will become the popover's arrow.</p>
             <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
           </td>
         </tr>
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index ae553e0df..b8293c9f5 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -12,25 +12,25 @@
   <h3>Static tooltip</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-tooltip">
-    <div class="tooltip left" role="tooltip">
+    <div class="tooltip tooltip-left" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the left
       </div>
     </div>
-    <div class="tooltip top" role="tooltip">
+    <div class="tooltip tooltip-top" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the top
       </div>
     </div>
-    <div class="tooltip bottom" role="tooltip">
+    <div class="tooltip tooltip-bottom" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the bottom
       </div>
     </div>
-    <div class="tooltip right" role="tooltip">
+    <div class="tooltip tooltip-right" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the right
diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md
index 0844621ba..28cafb1b0 100644
--- a/docs/javascript/popovers.md
+++ b/docs/javascript/popovers.md
@@ -43,24 +43,24 @@ $(function () {
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bs-example bs-example-popover">
-  <div class="popover top">
-    <div class="arrow"></div>
+  <div class="popover popover-top">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover right">
-    <div class="arrow"></div>
+  <div class="popover popover-right">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover bottom">
-    <div class="arrow"></div>
+  <div class="popover popover-bottom">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
 
     <div class="popover-content">
@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover left">
-    <div class="arrow"></div>
+  <div class="popover popover-left">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <tr>
         <td>template</td>
         <td>string</td>
-        <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+        <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
         <td>
           <p>Base HTML to use when creating the popover.</p>
           <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
           <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-          <p><code>.arrow</code> will become the popover's arrow.</p>
+          <p><code>.popover-arrow</code> will become the popover's arrow.</p>
           <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
         </td>
       </tr>
diff --git a/js/popover.js b/js/popover.js
index db272bdee..085584fe8 100644
--- a/js/popover.js
+++ b/js/popover.js
@@ -25,7 +25,7 @@
     placement: 'right',
     trigger: 'click',
     content: '',
-    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
   })
 
 
@@ -50,7 +50,7 @@
       this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text'
     ](content)
 
-    $tip.removeClass('fade top bottom left right in')
+    $tip.removeClass('fade popover-top popover-bottom popover-left popover-right in')
 
     // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
     // this manually by checking the contents.
@@ -72,7 +72,7 @@
   }
 
   Popover.prototype.arrow = function () {
-    return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
+    return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow'))
   }
 
   Popover.prototype.tip = function () {
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 466ebace2..8f59d3483 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -141,7 +141,7 @@ $(function () {
       .bootstrapPopover({
         title: 'Test',
         content: 'Test',
-        template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
+        template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
       })
 
     $popover.bootstrapPopover('show')
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index eb578c22a..6232ccdcb 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -85,7 +85,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'bottom' })
 
     $tooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $tooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed')
@@ -300,8 +300,8 @@ $(function () {
 
   test('should add position class before positioning so that position-specific styles are taken into account', function () {
     var styles = '<style>'
-        + '.tooltip.right { white-space: nowrap; }'
-        + '.tooltip.right .tooltip-inner { max-width: none; }'
+        + '.tooltip.tooltip-right { white-space: nowrap; }'
+        + '.tooltip.tooltip-right .tooltip-inner { max-width: none; }'
         + '</style>'
     var $styles = $(styles).appendTo('head')
 
@@ -384,7 +384,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'auto' })
 
     $topTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $topTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
@@ -394,7 +394,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'right auto' })
 
     $rightTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
+    ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left')
 
     $rightTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
@@ -404,7 +404,7 @@ $(function () {
       .bootstrapTooltip({ placement: 'auto left' })
 
     $leftTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
+    ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right')
 
     $leftTooltip.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
@@ -430,7 +430,7 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
+    ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -455,7 +455,7 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -481,7 +481,7 @@ $(function () {
     $('#scrollable-div').scrollTop(100)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -507,7 +507,7 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -537,7 +537,7 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
@@ -563,7 +563,7 @@ $(function () {
     $('#scrollable-div').scrollTop(400)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
+    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
     equal($('.tooltip').length, 0, 'tooltip removed from dom')
diff --git a/js/tooltip.js b/js/tooltip.js
index bd376f772..9d3074cc0 100644
--- a/js/tooltip.js
+++ b/js/tooltip.js
@@ -177,7 +177,7 @@
       $tip
         .detach()
         .css({ top: 0, left: 0, display: 'block' })
-        .addClass(placement)
+        .addClass(this.type + '-' + placement)
         .data('bs.' + this.type, this)
 
       this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
@@ -187,7 +187,7 @@
       var actualHeight = $tip[0].offsetHeight
 
       if (autoPlace) {
-        var orgPlacement = placement
+        var origPlacement = placement
         var $container   = this.options.container ? $(this.options.container) : this.$element.parent()
         var containerDim = this.getPosition($container)
 
@@ -198,8 +198,8 @@
                     placement
 
         $tip
-          .removeClass(orgPlacement)
-          .addClass(placement)
+          .removeClass(this.type + '-' + origPlacement)
+          .addClass(this.type + '-' + placement)
       }
 
       var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
@@ -283,7 +283,7 @@
     var title = this.getTitle()
 
     $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
-    $tip.removeClass('fade in top bottom left right')
+    $tip.removeClass('fade in tooltip-top tooltip-bottom tooltip-left tooltip-right')
   }
 
   Tooltip.prototype.hide = function (callback) {
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 63928a4fc..a614518c7 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -24,14 +24,14 @@
   border: 1px solid $popover-border-color;
   @include border-radius($border-radius-lg);
   @include box-shadow(0 5px 10px rgba(0,0,0,.2));
-
-  // Offset the popover to account for the popover arrow
-  &.top     { margin-top: -$popover-arrow-width; }
-  &.right   { margin-left: $popover-arrow-width; }
-  &.bottom  { margin-top: $popover-arrow-width; }
-  &.left    { margin-left: -$popover-arrow-width; }
 }
 
+// Offset the popover to account for the popover arrow
+.popover-top     { margin-top: -$popover-arrow-width; }
+.popover-right   { margin-left: $popover-arrow-width; }
+.popover-bottom  { margin-top: $popover-arrow-width; }
+.popover-left    { margin-left: -$popover-arrow-width; }
+
 .popover-title {
   padding: 8px 14px;
   margin: 0; // reset heading margin
@@ -47,9 +47,9 @@
 
 // Arrows
 //
-// .arrow is outer, .arrow:after is inner
+// .popover-arrow is outer, .popover-arrow:after is inner
 
-.popover > .arrow {
+.popover-arrow {
   &,
   &:after {
     position: absolute;
@@ -60,70 +60,68 @@
     border-style: solid;
   }
 }
-.popover > .arrow {
+.popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover > .arrow:after {
+.popover-arrow:after {
   content: "";
   border-width: $popover-arrow-width;
 }
 
-.popover {
-  &.top > .arrow {
-    bottom: -$popover-arrow-outer-width;
-    left: 50%;
-    margin-left: -$popover-arrow-outer-width;
-    border-top-color: $popover-arrow-outer-color;
+.popover-top > .popover-arrow {
+  bottom: -$popover-arrow-outer-width;
+  left: 50%;
+  margin-left: -$popover-arrow-outer-width;
+  border-top-color: $popover-arrow-outer-color;
+  border-bottom-width: 0;
+  &:after {
+    bottom: 1px;
+    margin-left: -$popover-arrow-width;
+    content: "";
+    border-top-color: $popover-arrow-color;
     border-bottom-width: 0;
-    &:after {
-      bottom: 1px;
-      margin-left: -$popover-arrow-width;
-      content: "";
-      border-top-color: $popover-arrow-color;
-      border-bottom-width: 0;
-    }
   }
-  &.right > .arrow {
-    top: 50%;
-    left: -$popover-arrow-outer-width;
-    margin-top: -$popover-arrow-outer-width;
-    border-right-color: $popover-arrow-outer-color;
+}
+.popover-right > .popover-arrow {
+  top: 50%;
+  left: -$popover-arrow-outer-width;
+  margin-top: -$popover-arrow-outer-width;
+  border-right-color: $popover-arrow-outer-color;
+  border-left-width: 0;
+  &:after {
+    bottom: -$popover-arrow-width;
+    left: 1px;
+    content: "";
+    border-right-color: $popover-arrow-color;
     border-left-width: 0;
-    &:after {
-      bottom: -$popover-arrow-width;
-      left: 1px;
-      content: "";
-      border-right-color: $popover-arrow-color;
-      border-left-width: 0;
-    }
   }
-  &.bottom > .arrow {
-    top: -$popover-arrow-outer-width;
-    left: 50%;
-    margin-left: -$popover-arrow-outer-width;
+}
+.popover-bottom > .popover-arrow {
+  top: -$popover-arrow-outer-width;
+  left: 50%;
+  margin-left: -$popover-arrow-outer-width;
+  border-top-width: 0;
+  border-bottom-color: $popover-arrow-outer-color;
+  &:after {
+    top: 1px;
+    margin-left: -$popover-arrow-width;
+    content: "";
     border-top-width: 0;
-    border-bottom-color: $popover-arrow-outer-color;
-    &:after {
-      top: 1px;
-      margin-left: -$popover-arrow-width;
-      content: "";
-      border-top-width: 0;
-      border-bottom-color: $popover-arrow-color;
-    }
+    border-bottom-color: $popover-arrow-color;
   }
+}
 
-  &.left > .arrow {
-    top: 50%;
-    right: -$popover-arrow-outer-width;
-    margin-top: -$popover-arrow-outer-width;
+.popover-left > .popover-arrow {
+  top: 50%;
+  right: -$popover-arrow-outer-width;
+  margin-top: -$popover-arrow-outer-width;
+  border-right-width: 0;
+  border-left-color: $popover-arrow-outer-color;
+  &:after {
+    right: 1px;
+    bottom: -$popover-arrow-width;
+    content: "";
     border-right-width: 0;
-    border-left-color: $popover-arrow-outer-color;
-    &:after {
-      right: 1px;
-      bottom: -$popover-arrow-width;
-      content: "";
-      border-right-width: 0;
-      border-left-color: $popover-arrow-color;
-    }
+    border-left-color: $popover-arrow-color;
   }
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index b1e3f4666..49af2b288 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -17,26 +17,23 @@
   opacity: 0;
 
   &.in { opacity: $tooltip-opacity; }
+}
 
-  &.top {
-    padding: $tooltip-arrow-width 0;
-    margin-top: -3px;
-  }
-
-  &.right {
-    padding: 0 $tooltip-arrow-width;
-    margin-left: 3px;
-  }
-
-  &.bottom {
-    padding: $tooltip-arrow-width 0;
-    margin-top: 3px;
-  }
-
-  &.left {
-    padding: 0 $tooltip-arrow-width;
-    margin-left: -3px;
-  }
+.tooltip-top {
+  padding: $tooltip-arrow-width 0;
+  margin-top: -3px;
+}
+.tooltip-right {
+  padding: 0 $tooltip-arrow-width;
+  margin-left: 3px;
+}
+.tooltip-bottom {
+  padding: $tooltip-arrow-width 0;
+  margin-top: 3px;
+}
+.tooltip-left {
+  padding: 0 $tooltip-arrow-width;
+  margin-left: -3px;
 }
 
 // Wrapper for the tooltip content
@@ -58,33 +55,31 @@
   border-color: transparent;
   border-style: solid;
 }
-.tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-top-color: $tooltip-arrow-color;
-  }
-  &.right .tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
-    border-right-color: $tooltip-arrow-color;
-  }
-  &.left .tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -$tooltip-arrow-width;
-    border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-left-color: $tooltip-arrow-color;
-  }
-  &.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -$tooltip-arrow-width;
-    border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
-    border-bottom-color: $tooltip-arrow-color;
-  }
+.tooltip-top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-top-color: $tooltip-arrow-color;
+}
+.tooltip-right .tooltip-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-right-color: $tooltip-arrow-color;
+}
+.tooltip-left .tooltip-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -$tooltip-arrow-width;
+  border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-left-color: $tooltip-arrow-color;
+}
+.tooltip-bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -$tooltip-arrow-width;
+  border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-bottom-color: $tooltip-arrow-color;
 }