diff options
author | F A T <jacobthornton@gmail.com> | 2015-04-27 21:28:54 +0300 |
---|---|---|
committer | F A T <jacobthornton@gmail.com> | 2015-04-27 21:28:54 +0300 |
commit | aa479892d5985939b005c7978023e05d124ae263 (patch) | |
tree | 73d0842dfaa6205c16bd76c47d115e2e21e9b24f /js | |
parent | cc8567d7846f72628ec6463f3667f95b55a10b5b (diff) | |
parent | 5921724d9c22098326bed005884477d3e8b6ec44 (diff) |
Merge pull request #16152 from jarthod/tooltip-placement-viewport-fix
Tooltip/popover: Fix auto placement to use viewport
Diffstat (limited to 'js')
-rw-r--r-- | js/tests/unit/tooltip.js | 45 | ||||
-rw-r--r-- | js/tooltip.js | 11 |
2 files changed, 38 insertions, 18 deletions
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 51cfcb9335..bdcf0bbd00 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -376,23 +376,19 @@ $(function () { assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') }) - QUnit.test('should be placed dynamically with the dynamic placement option', function (assert) { + QUnit.test('should be placed dynamically to viewport with the dynamic placement option', function (assert) { assert.expect(6) - var $style = $('<style> a[rel="tooltip"] { display: inline-block; position: absolute; } </style>') + var $style = $('<style> div[rel="tooltip"] { position: absolute; } #qunit-fixture { top: inherit; left: inherit } </style>').appendTo('head') var $container = $('<div/>') .css({ - position: 'absolute', - overflow: 'hidden', - width: 600, - height: 400, - top: 0, - left: 0 + position: 'relative', + height: '100%' }) - .appendTo(document.body) + .appendTo('#qunit-fixture') var $topTooltip = $('<div style="left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>') .appendTo($container) - .bootstrapTooltip({ placement: 'auto' }) + .bootstrapTooltip({ placement: 'auto', viewport: '#qunit-fixture' }) $topTooltip.bootstrapTooltip('show') assert.ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') @@ -402,7 +398,7 @@ $(function () { var $rightTooltip = $('<div style="right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>') .appendTo($container) - .bootstrapTooltip({ placement: 'right auto' }) + .bootstrapTooltip({ placement: 'right auto', viewport: '#qunit-fixture' }) $rightTooltip.bootstrapTooltip('show') assert.ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left') @@ -412,7 +408,7 @@ $(function () { var $leftTooltip = $('<div style="left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>') .appendTo($container) - .bootstrapTooltip({ placement: 'auto left' }) + .bootstrapTooltip({ placement: 'auto left', viewport: '#qunit-fixture' }) $leftTooltip.bootstrapTooltip('show') assert.ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right') @@ -450,6 +446,31 @@ $(function () { $styles.remove() }) + QUnit.test('should position tip on top if viewport has enough space and is not parent', function (assert) { + assert.expect(2) + var styles = '<style>' + + '#section { height: 300px; border: 1px solid red; margin-top: 100px; }' + + 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }' + + '</style>' + var $styles = $(styles).appendTo('head') + + var $container = $('<div id="section"/>').appendTo('#qunit-fixture') + var $target = $('<div rel="tooltip" title="tip"/>') + .appendTo($container) + .bootstrapTooltip({ + placement: 'auto top', + viewport: '#qunit-fixture' + }) + + $target.bootstrapTooltip('show') + assert.ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top') + + $target.bootstrapTooltip('hide') + assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') + + $styles.remove() + }) + QUnit.test('should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"', function (assert) { assert.expect(2) var styles = '<style>' diff --git a/js/tooltip.js b/js/tooltip.js index 1f66413d80..f48dcfb701 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -193,13 +193,12 @@ if (autoPlace) { var orgPlacement = placement - var $container = this.options.container ? $(this.options.container) : this.$element.parent() - var containerDim = this.getPosition($container) + var viewportDim = this.getPosition(this.$viewport) - placement = placement == 'bottom' && pos.bottom + actualHeight > containerDim.bottom ? 'top' : - placement == 'top' && pos.top - actualHeight < containerDim.top ? 'bottom' : - placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' : - placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' : + placement = placement == 'bottom' && pos.bottom + actualHeight > viewportDim.bottom ? 'top' : + placement == 'top' && pos.top - actualHeight < viewportDim.top ? 'bottom' : + placement == 'right' && pos.right + actualWidth > viewportDim.width ? 'left' : + placement == 'left' && pos.left - actualWidth < viewportDim.left ? 'right' : placement $tip |