aboutsummaryrefslogtreecommitdiff
path: root/js/tests/unit
diff options
context:
space:
mode:
Diffstat (limited to 'js/tests/unit')
-rw-r--r--js/tests/unit/tooltip.js81
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()
+ })
})