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

2 files changed, 72 insertions, 0 deletions

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 5f7847e92..ecb41c453 100644
--- a/js/tests/unit/tooltip.js
+++ b/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()
+      })
+
 })
diff --git a/js/tooltip.js b/js/tooltip.js
index 102550594..7e3fa8098 100644
--- a/js/tooltip.js
+++ b/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}