Tooltips replaced when possible on edge cases

Created by: ghusse

Before:

After:

js/bootstrap-tooltip.js

@@ -117,6 +117,7 @@
           this.options.placement
 
         inside = /in/.test(placement)
+        placement = inside ? placement.split(' ')[1] : placement;
 
         $tip
           .detach()
@@ -128,7 +129,7 @@
         actualWidth = $tip[0].offsetWidth
         actualHeight = $tip[0].offsetHeight
 
-        switch (inside ? placement.split(' ')[1] : placement) {
+        switch (placement) {
           case 'bottom':
             tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
             break
@@ -143,13 +144,62 @@
             break
         }
 
-        $tip
-          .offset(tp)
+        this.applyPlacement(tp, placement);
+      }
+    }
+
+  , applyPlacement: function(offset, placement){
+    var $tip
+      , $arrow
+      , width
+      , height
+      , actualWidth
+      , actualHeight
+      , deltaX
+      , replace = false;
+
+    $tip = this.tip();
+
+    width = $tip[0].offsetWidth;
+    height = $tip[0].offsetHeight;
+
+    $tip
+          .offset(offset)
           .addClass(placement)
-          .addClass('in')
+          .addClass('in');
+
+    actualWidth = $tip[0].offsetWidth;
+    actualHeight = $tip[0].offsetHeight;
+
+    if (placement == "top" && actualHeight != actualWidth){
+      offset.top = offset.top + height - actualHeight;
+      replace = true;
+    }
+
+    if (placement == "bottom" || placement == "top"){
+      deltaX = 0;
+
+      if (offset.left < 0){
+        deltaX = -offset.left * 2;
+        offset.left = 0;
+        $tip.offset(offset);
+        actualWidth = $tip[0].offsetWidth;
+        actualHeight = $tip[0].offsetHeight;
+      }
+
+      deltaX = deltaX - width + actualWidth;
+      $arrow = this.arrow();
+        
+      if (deltaX !==  0){
+        $arrow.css("left", 50 * (1 - deltaX / actualWidth) + "%");
+      }else{
+        $arrow.css("left", "");
       }
     }
 
+    if (replace) $tip.offset(offset);
+  }
+
   , setContent: function () {
       var $tip = this.tip()
         , title = this.getTitle()
@@ -215,6 +265,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()

less/tooltip.less

@@ -9,14 +9,13 @@
   z-index: @zindexTooltip;
   display: block;
   visibility: visible;
-  padding: 5px;
   font-size: 11px;
   .opacity(0);
   &.in     { .opacity(80); }
-  &.top    { margin-top:  -3px; }
-  &.right  { margin-left:  3px; }
-  &.bottom { margin-top:   3px; }
-  &.left   { margin-left: -3px; }
+  &.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