mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

Fixes tooltip misplacements in scrollable viewports with auto positioning

Browse Source 
Fixes #14756.
Closes #14767.
This commit is contained in:
saranya.r
2014-10-10 11:49:45 +05:30
committed by Heinrich Fenkart
parent 2bc5277b44
commit e2cfbd5f2d
2 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -432,6 +432,110 @@ $(function () {
$styles.remove()
})
test('should display the tip on top whenever scrollable viewport has enough room if the given placement is "auto top"', function () {
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin: 200px 0 400px; width: 150px; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div id="scrollable-div"/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>')
.appendTo($container)
.bootstrapTooltip({
placement: 'top auto',
viewport: '#scrollable-div'
})
$('#scrollable-div').scrollTop(100)
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
$styles.remove()
})
test('should display the tip on bottom whenever scrollable viewport doesn\'t have enough room if the given placement is "auto top"', function () {
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin: 200px 0 400px; width: 150px; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div id="scrollable-div"/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>')
.appendTo($container)
.bootstrapTooltip({
placement: 'top auto',
viewport: '#scrollable-div'
})
$('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
$styles.remove()
})
test('should display the tip on bottom whenever scrollable viewport has enough room if the given placement is "auto bottom"', function () {
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin: 200px 0 400px; width: 150px; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div id="scrollable-div"/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>')
.appendTo($container)
.bootstrapTooltip({
placement: 'bottom auto',
viewport: '#scrollable-div'
})
$('#scrollable-div').scrollTop(200)
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
$styles.remove()
})
test('should display the tip on top whenever scrollable viewport doesn\'t have enough room if the given placement is "auto bottom"', function () {
var styles = '<style>'
+ '#scrollable-div { height: 200px; overflow: auto; }'
+ '.tooltip-item { margin-top: 400px; width: 150px; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<div id="scrollable-div"/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip" class="tooltip-item">Tooltip Item</div>')
.appendTo($container)
.bootstrapTooltip({
placement: 'bottom auto',
viewport: '#scrollable-div'
})
$('#scrollable-div').scrollTop(400)
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
$styles.remove()
})
test('should adjust the tip\'s top position when up against the top of the viewport', function () {
var styles = '<style>'
+ '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'