clean up styles

docs/assets/css/bootstrap.css

@@ -5290,7 +5290,6 @@ input[type="submit"].btn.btn-mini {
   position: absolute;
   z-index: 1030;
   display: block;
-  padding: 5px;
   font-size: 11px;
   line-height: 1.4;
   opacity: 0;
@@ -5304,18 +5303,22 @@ input[type="submit"].btn.btn-mini {
 }
 
 .tooltip.top {
+  padding: 5px 0;
   margin-top: -3px;
 }
 
 .tooltip.right {
+  padding: 0 5px;
   margin-left: 3px;
 }
 
 .tooltip.bottom {
+  padding: 5px 0;
   margin-top: 3px;
 }
 
 .tooltip.left {
+  padding: 0 5px;
   margin-left: -3px;
 }
 

docs/assets/js/bootstrap-tooltip.js

@@ -152,15 +152,58 @@
             break
         }
 
-        $tip
-          .offset(tp)
-          .addClass(placement)
-          .addClass('in')
-
+        this.applyPlacement(tp, placement)
         this.$element.trigger('shown')
       }
     }
 
+  , applyPlacement: function(offset, placement){
+      var $tip = this.tip()
+        , width = $tip[0].offsetWidth
+        , height = $tip[0].offsetHeight
+        , actualWidth
+        , actualHeight
+        , delta
+        , replace
+
+      $tip
+        .offset(offset)
+        .addClass(placement)
+        .addClass('in')
+
+      actualWidth = $tip[0].offsetWidth
+      actualHeight = $tip[0].offsetHeight
+
+      if (placement == 'top' && actualHeight != height) {
+        offset.top = offset.top + height - actualHeight
+        replace = true
+      }
+
+      if (placement == 'bottom' || placement == 'top') {
+        delta = 0
+
+        if (offset.left < 0){
+          delta = offset.left * -2
+          offset.left = 0
+          $tip.offset(offset)
+          actualWidth = $tip[0].offsetWidth
+          actualHeight = $tip[0].offsetHeight
+        }
+
+        this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
+      } else {
+        this.replaceArrow(actualHeight - height, actualHeight, 'top')
+      }
+
+      if (replace) $tip.offset(offset)
+    }
+
+  , replaceArrow: function(delta, dimension, position){
+      this
+        .arrow()
+        .css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
+    }
+
   , setContent: function () {
       var $tip = this.tip()
         , title = this.getTitle()
@@ -233,6 +276,10 @@
       return this.$tip = this.$tip || $(this.options.template)
     }
 
+  , arrow: function(){
+      return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+    }
+
   , validate: function () {
       if (!this.$element[0].parentNode) {
         this.hide()

docs/assets/js/bootstrap.js

@@ -1194,15 +1194,58 @@
             break
         }
 
-        $tip
-          .offset(tp)
-          .addClass(placement)
-          .addClass('in')
-
+        this.applyPlacement(tp, placement)
         this.$element.trigger('shown')
       }
     }
 
+  , applyPlacement: function(offset, placement){
+      var $tip = this.tip()
+        , width = $tip[0].offsetWidth
+        , height = $tip[0].offsetHeight
+        , actualWidth
+        , actualHeight
+        , delta
+        , replace
+
+      $tip
+        .offset(offset)
+        .addClass(placement)
+        .addClass('in')
+
+      actualWidth = $tip[0].offsetWidth
+      actualHeight = $tip[0].offsetHeight
+
+      if (placement == 'top' && actualHeight != height) {
+        offset.top = offset.top + height - actualHeight
+        replace = true
+      }
+
+      if (placement == 'bottom' || placement == 'top') {
+        delta = 0
+
+        if (offset.left < 0){
+          delta = offset.left * -2
+          offset.left = 0
+          $tip.offset(offset)
+          actualWidth = $tip[0].offsetWidth
+          actualHeight = $tip[0].offsetHeight
+        }
+
+        this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
+      } else {
+        this.replaceArrow(actualHeight - height, actualHeight, 'top')
+      }
+
+      if (replace) $tip.offset(offset)
+    }
+
+  , replaceArrow: function(delta, dimension, position){
+      this
+        .arrow()
+        .css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
+    }
+
   , setContent: function () {
       var $tip = this.tip()
         , title = this.getTitle()
@@ -1275,6 +1318,10 @@
       return this.$tip = this.$tip || $(this.options.template)
     }
 
+  , arrow: function(){
+      return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+    }
+
   , validate: function () {
       if (!this.$element[0].parentNode) {
         this.hide()

js/bootstrap-tooltip.js

@@ -153,66 +153,56 @@
         }
 
         this.applyPlacement(tp, placement)
-
         this.$element.trigger('shown')
       }
     }
 
   , applyPlacement: function(offset, placement){
-    var $tip
-      , width
-      , height
-      , actualWidth
-      , actualHeight
-      , delta
-      , replace = false
+      var $tip = this.tip()
+        , width = $tip[0].offsetWidth
+        , height = $tip[0].offsetHeight
+        , actualWidth
+        , actualHeight
+        , delta
+        , replace
 
-    $tip = this.tip()
+      $tip
+        .offset(offset)
+        .addClass(placement)
+        .addClass('in')
 
-    width = $tip[0].offsetWidth
-    height = $tip[0].offsetHeight
+      actualWidth = $tip[0].offsetWidth
+      actualHeight = $tip[0].offsetHeight
 
-    $tip
-          .offset(offset)
-          .addClass(placement)
-          .addClass('in')
-
-    actualWidth = $tip[0].offsetWidth
-    actualHeight = $tip[0].offsetHeight
-
-    if (placement == "top" && actualHeight != height){
-      offset.top = offset.top + height - actualHeight
-      replace = true
-    }
-
-    if (placement == "bottom" || placement == "top"){
-      delta = 0
-
-      if (offset.left < 0){
-        delta = -offset.left * 2
-        offset.left = 0
-        $tip.offset(offset)
-        actualWidth = $tip[0].offsetWidth
-        actualHeight = $tip[0].offsetHeight
+      if (placement == 'top' && actualHeight != height) {
+        offset.top = offset.top + height - actualHeight
+        replace = true
       }
 
-      this.replaceArrow(delta - width + actualWidth, actualWidth, "left")
-    }else{
-      this.replaceArrow(actualHeight - height, actualHeight, "top")
-    }
+      if (placement == 'bottom' || placement == 'top') {
+        delta = 0
 
-    if (replace) $tip.offset(offset)
-  }
+        if (offset.left < 0){
+          delta = offset.left * -2
+          offset.left = 0
+          $tip.offset(offset)
+          actualWidth = $tip[0].offsetWidth
+          actualHeight = $tip[0].offsetHeight
+        }
+
+        this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
+      } else {
+        this.replaceArrow(actualHeight - height, actualHeight, 'top')
+      }
+
+      if (replace) $tip.offset(offset)
+    }
 
   , replaceArrow: function(delta, dimension, position){
-    var $arrow = this.arrow()
-
-    if (delta !== 0){
-      $arrow.css(position, 50 * (1 - delta / dimension) + "%")
-    }else{
-      $arrow.css(position, "")
+      this
+        .arrow()
+        .css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
     }
-  }
 
   , setContent: function () {
       var $tip = this.tip()
@@ -287,8 +277,8 @@
     }
 
   , arrow: function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
-  }
+      return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+    }
 
   , validate: function () {
       if (!this.$element[0].parentNode) {

js/tests/index.html

@@ -29,9 +29,6 @@
   <script src="../../js/bootstrap-typeahead.js"></script>
   <script src="../../js/bootstrap-affix.js"></script>
 
-  <!-- Needed for testing -->
-  <link rel="stylesheet" type="text/css" href="unit/bootstrap-tooltip.css" />
-
   <!-- unit tests -->
   <script src="unit/bootstrap-transition.js"></script>
   <script src="unit/bootstrap-alert.js"></script>

js/tests/unit/bootstrap-tooltip.css

@@ -1,13 +0,0 @@
-
-
-.tooltip{
-	position: absolute;
-}
-
-.tooltip-inner{
-	max-width: 200px;
-}
-
-.tooltip.top .tooltip-arrow{
-	position: absolute;
-}

js/tests/unit/bootstrap-tooltip.js

@@ -291,25 +291,4 @@ $(function () {
           container.remove()
         }, 100)
       })
-
-      test("arrow should point to element", function(){
-        var container = $("<div />").appendTo("body")
-            .css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
-          , p = $("<p style='margin-top:200px' />").appendTo(container)
-          , tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
-            .css({marginTop: 200})
-            .appendTo(p)
-            .tooltip({placement: "top", animate: false})
-            .tooltip("show")
-
-        stop()
-
-        setTimeout(function(){
-          var arrow = container.find(".tooltip-arrow")
-
-          start()
-          ok(Math.abs(arrow.offset().left - tooltiped.offset().left - tooltiped.outerWidth()/2) <= 1)
-          container.remove()
-        }, 100)
-      })
 })

less/tooltip.less

@@ -13,10 +13,10 @@
   line-height: 1.4;
   .opacity(0);
   &.in     { .opacity(80); }
-  &.top    { margin-top:  -3px; padding: 5px 0;}
-  &.right  { margin-left:  3px; padding: 0 5px;}
-  &.bottom { margin-top:   3px; padding: 5px 0;}
-  &.left   { margin-left: -3px; padding: 0 5px;}
+  &.top    { margin-top:  -3px; padding: 5px 0; }
+  &.right  { margin-left:  3px; padding: 0 5px; }
+  &.bottom { margin-top:   3px; padding: 5px 0; }
+  &.left   { margin-left: -3px; padding: 0 5px; }
 }
 
 // Wrapper for the tooltip content