rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Fix tooltip misplacement with "auto top"

Browse Source 
Fixes #14322.
Closes #14581.
This commit is contained in:
saranya.r 2014-09-09 18:47:06 +05:30 committed by Heinrich Fenkart
parent c5c67d0f54
commit db9e8ee813
2 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -382,6 +382,56 @@ $(function () {
$style.remove()
})
test('should position tip on top if viewport has enough space and placement is "auto top"', function () {
var styles = '<style>'
+ 'body { padding-top: 100px; }'
+ 'section { height: 300px; border: 1px solid red; padding-top: 50px }'
+ 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<section/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip"/>')
.appendTo($container)
.bootstrapTooltip({
placement: 'auto top',
viewport: 'section'
})
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
$target.bootstrapTooltip('hide')
equal($('.tooltip').length, 0, 'tooltip removed from dom')
$styles.remove()
})
test('should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"', function () {
var styles = '<style>'
+ 'body { padding-top: 100px; }'
+ 'section { height: 300px; border: 1px solid red; }'
+ 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+ '</style>'
var $styles = $(styles).appendTo('head')
var $container = $('<section/>').appendTo('#qunit-fixture')
var $target = $('<div rel="tooltip" title="tip"/>')
.appendTo($container)
.bootstrapTooltip({
placement: 'auto top',
viewport: 'section'
})
$target.bootstrapTooltip('show')
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
$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; }'

2
js/tooltip.js
View File

@ -192,7 +192,7 @@
var parentDim = this.getPosition($parent)
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
placement == 'top' && pos.top - parentDim.scroll - actualHeight < 0 ? 'bottom' :
placement == 'top' && pos.top - parentDim.scroll - actualHeight < parentDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' :
placement