root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Merge pull request #16152 from jarthod/tooltip-placement-viewport-fix 

Tooltip/popover: Fix auto placement to use viewport
This commit is contained in:
F A T 2015-04-27 11:28:54 -07:00
parent cc8567d784 5921724d9c
commit aa479892d5
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
js/tests/unit/tooltip.js
View File

@ -376,23 +376,19 @@ $(function () {
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom') 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) 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/>') var $container = $('<div/>')
.css({ .css({
position: 'absolute', position: 'relative',
overflow: 'hidden', height: '100%'
width: 600,
height: 400,
top: 0,
left: 0
}) })
.appendTo(document.body) .appendTo('#qunit-fixture')
var $topTooltip = $('<div style="left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>') var $topTooltip = $('<div style="left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
.appendTo($container) .appendTo($container)
.bootstrapTooltip({ placement: 'auto' }) .bootstrapTooltip({ placement: 'auto', viewport: '#qunit-fixture' })
$topTooltip.bootstrapTooltip('show') $topTooltip.bootstrapTooltip('show')
assert.ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') 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>') var $rightTooltip = $('<div style="right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
.appendTo($container) .appendTo($container)
.bootstrapTooltip({ placement: 'right auto' }) .bootstrapTooltip({ placement: 'right auto', viewport: '#qunit-fixture' })
$rightTooltip.bootstrapTooltip('show') $rightTooltip.bootstrapTooltip('show')
assert.ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left') 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>') var $leftTooltip = $('<div style="left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
.appendTo($container) .appendTo($container)
.bootstrapTooltip({ placement: 'auto left' }) .bootstrapTooltip({ placement: 'auto left', viewport: '#qunit-fixture' })
$leftTooltip.bootstrapTooltip('show') $leftTooltip.bootstrapTooltip('show')
assert.ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right') assert.ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
@ -450,6 +446,31 @@ $(function () {
$styles.remove() $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) { 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) assert.expect(2)
var styles = '<style>' var styles = '<style>'

11
js/tooltip.js
View File

@ -193,13 +193,12 @@
if (autoPlace) { if (autoPlace) {
var orgPlacement = placement var orgPlacement = placement
var $container = this.options.container ? $(this.options.container) : this.$element.parent() var viewportDim = this.getPosition(this.$viewport)
var containerDim = this.getPosition($container)
placement = placement == 'bottom' && pos.bottom + actualHeight > containerDim.bottom ? 'top' : placement = placement == 'bottom' && pos.bottom + actualHeight > viewportDim.bottom ? 'top' :
placement == 'top' && pos.top - actualHeight < containerDim.top ? 'bottom' : placement == 'top' && pos.top - actualHeight < viewportDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' : placement == 'right' && pos.right + actualWidth > viewportDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' : placement == 'left' && pos.left - actualWidth < viewportDim.left ? 'right' :
placement placement
$tip $tip