Add tooltip `viewport` option, respect bounds of the viewport

1 files changed, 79 insertions, 2 deletions

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 9df234236..e670883e3 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -337,12 +337,12 @@ $(function () {
   })
 
   test('should add position class before positioning so that position-specific styles are taken into account', function () {
-    $('head').append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
+    $('head').append('<style id="test"> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
 
     var container = $('<div />').appendTo('body'),
         target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
           .appendTo(container)
-          .tooltip({placement: 'right'})
+          .tooltip({placement: 'right', viewport: null})
           .tooltip('show'),
         tooltip = container.find('.tooltip')
 
@@ -352,6 +352,7 @@ $(function () {
     var topDiff =  top - top2
     ok(topDiff <= 1 && topDiff >= -1)
     target.tooltip('hide')
+    $('head #test').remove()
   })
 
   test('tooltip title test #1', function () {
@@ -428,4 +429,80 @@ $(function () {
     ttContainer.remove()
   })
 
+  test('should adjust the tip\'s top when up against the top of the viewport', function () {
+    $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+    var container = $('<div />').appendTo('body'),
+      target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
+          .appendTo(container)
+          .tooltip({placement: 'right', viewport: {selector: 'body', padding: 12}})
+          .tooltip('show'),
+      tooltip = container.find('.tooltip')
+
+    ok( Math.round(tooltip.offset().top) === 12 )
+    target.tooltip('hide')
+    $('head #test').remove()
+  })
+
+  test('should adjust the tip\'s top when up against the bottom of the viewport', function () {
+    $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+    var container = $('<div />').appendTo('body'),
+      target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; bottom: 0px; left: 0px;"></a>')
+          .appendTo(container)
+          .tooltip({placement: 'right', viewport: {selector: 'body', padding: 12}})
+          .tooltip('show'),
+      tooltip = container.find('.tooltip')
+
+    ok( Math.round(tooltip.offset().top) === Math.round($(window).height() - 12 - tooltip[0].offsetHeight) )
+    target.tooltip('hide')
+    $('head #test').remove()
+  })
+
+  test('should adjust the tip\'s left when up against the left of the viewport', function () {
+    $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+    var container = $('<div />').appendTo('body'),
+      target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
+          .appendTo(container)
+          .tooltip({placement: 'bottom', viewport: {selector: 'body', padding: 12}})
+          .tooltip('show'),
+      tooltip = container.find('.tooltip')
+
+    ok( Math.round(tooltip.offset().left) === 12 )
+    target.tooltip('hide')
+    $('head #test').remove()
+  })
+
+  test('should adjust the tip\'s left when up against the right of the viewport', function () {
+    $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+    var container = $('<div />').appendTo('body'),
+      target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; right: 0px;"></a>')
+          .appendTo(container)
+          .tooltip({placement: 'bottom', viewport: {selector: 'body', padding: 12}})
+          .tooltip('show'),
+      tooltip = container.find('.tooltip')
+
+    ok( Math.round(tooltip.offset().left) === Math.round($(window).width() - 12 - tooltip[0].offsetWidth) )
+    target.tooltip('hide')
+    $('head #test').remove()
+  })
+
+  test('should adjust the tip when up against the right of an arbitrary viewport', function () {
+    $('head').append('<style id="test"> .tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+    $('head').append('<style id="viewport-style"> .container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; } </style>')
+
+    var container = $('<div />', {class: 'container-viewport'}).appendTo('body'),
+      target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 50px; left: 350px;"></a>')
+          .appendTo(container)
+          .tooltip({placement: 'bottom', viewport: '.container-viewport'})
+          .tooltip('show'),
+      tooltip = container.find('.tooltip')
+
+    ok( Math.round(tooltip.offset().left) === Math.round(60 + container.width() - tooltip[0].offsetWidth) )
+    target.tooltip('hide')
+    $('head #test').remove()
+    $('head #viewport-style').remove()
+  })
 })