add placement auto for tooltips + tests… kinda sad about this doe

dist/js/bootstrap.js

@@ -1180,6 +1180,10 @@
         this.options.placement.call(this, $tip[0], this.$element[0]) :
         this.options.placement
 
+      var autoToken = /\s?auto?\s?/i
+      var autoPlace = autoToken.test(placement)
+      if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
+
       $tip
         .detach()
         .css({ top: 0, left: 0, display: 'block' })
@@ -1192,6 +1196,26 @@
       var actualWidth  = $tip[0].offsetWidth
       var actualHeight = $tip[0].offsetHeight
 
+      if (autoPlace) {
+        var $parent = this.$element.parent()
+
+        var orgPlacement = placement
+        var docScroll    = document.documentElement.scrollTop || document.body.scrollTop
+        var parentWidth  = this.options.container == 'body' ? window.innerWidth  : $parent.outerWidth()
+        var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
+        var parentLeft   = this.options.container == 'body' ? 0 : $parent.offset().left
+
+        placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
+                    placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
+                    placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
+                    placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
+                    placement
+
+        $tip
+          .removeClass(orgPlacement)
+          .addClass(placement)
+      }
+
       switch (placement) {
         case 'bottom':
           tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}

javascript.html

@@ -797,7 +797,7 @@ $('#example').tooltip(options)
                <td>placement</td>
                <td>string | function</td>
                <td>'top'</td>
-               <td>how to position the tooltip - top | bottom | left | right</td>
+               <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
              </tr>
              <tr>
                <td>selector</td>
@@ -979,7 +979,7 @@ $('#example').tooltip(options)
               <td>placement</td>
               <td>string | function</td>
               <td>'right'</td>
-              <td>how to position the popover - top | bottom | left | right</td>
+              <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
             </tr>
             <tr>
               <td>selector</td>

js/tests/unit/tooltip.js

@@ -341,4 +341,52 @@ $(function () {
         ok(!$(".tooltip").length, 'tooltip removed')
       })
 
+      test("tooltips should be placed dynamically, with the dynamic placement option", function () {
+        $.support.transition = false
+        var ttContainer = $('<div id="dynamic-tt-test"/>').css({
+          'height' : 400
+          , 'overflow' : 'hidden'
+          , 'position' : 'absolute'
+          , 'top' : 0
+          , 'left' : 0
+          , 'width' : 600})
+          .appendTo('body')
+
+        var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
+          .appendTo('#dynamic-tt-test')
+          .tooltip({placement: 'auto'})
+          .tooltip('show')
+
+
+        ok($(".tooltip").is('.bottom'),  'top positioned tooltip is dynamically positioned bottom')
+
+        topTooltip.tooltip('hide')
+
+        var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
+          .appendTo('#dynamic-tt-test')
+          .tooltip({placement: 'right auto'})
+          .tooltip('show')
+
+        ok($(".tooltip").is('.left'),  'right positioned tooltip is dynamically positioned left')
+        rightTooltip.tooltip('hide')
+
+        var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
+          .appendTo('#dynamic-tt-test')
+          .tooltip({placement: 'auto bottom'})
+          .tooltip('show')
+
+        ok($(".tooltip").is('.top'),  'bottom positioned tooltip is dynamically positioned top')
+        bottomTooltip.tooltip('hide')
+
+        var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
+          .appendTo('#dynamic-tt-test')
+          .tooltip({placement: 'auto left'})
+          .tooltip('show')
+
+        ok($(".tooltip").is('.right'),  'left positioned tooltip is dynamically positioned right')
+        leftTooltip.tooltip('hide')
+
+        ttContainer.remove()
+      })
+
 })

js/tooltip.js

@@ -144,6 +144,10 @@
         this.options.placement.call(this, $tip[0], this.$element[0]) :
         this.options.placement
 
+      var autoToken = /\s?auto?\s?/i
+      var autoPlace = autoToken.test(placement)
+      if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
+
       $tip
         .detach()
         .css({ top: 0, left: 0, display: 'block' })
@@ -156,6 +160,26 @@
       var actualWidth  = $tip[0].offsetWidth
       var actualHeight = $tip[0].offsetHeight
 
+      if (autoPlace) {
+        var $parent = this.$element.parent()
+
+        var orgPlacement = placement
+        var docScroll    = document.documentElement.scrollTop || document.body.scrollTop
+        var parentWidth  = this.options.container == 'body' ? window.innerWidth  : $parent.outerWidth()
+        var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
+        var parentLeft   = this.options.container == 'body' ? 0 : $parent.offset().left
+
+        placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
+                    placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
+                    placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
+                    placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
+                    placement
+
+        $tip
+          .removeClass(orgPlacement)
+          .addClass(placement)
+      }
+
       switch (placement) {
         case 'bottom':
           tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}