rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Use container instead of parent for tooltip/popover auto-placement calcs

Browse Source 
Fixes #14561. Big thanks to @wickstargazer.

[skip validator]
This commit is contained in:
Chris Rebert 2014-09-15 12:36:40 -07:00
parent 7ce6824748
commit 4d9890ea2e
2 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -827,6 +827,47 @@ $(function () {
$circle.bootstrapTooltip('show')
})
test('should correctly determine auto placement based on container rather than parent', function () {
stop()
var styles = '<style>'
+ '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+ '.tooltip { position: absolute; display: block; font-size: 12px; line-height: 1.4; }'
+ '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; font-family: Helvetica; text-align: center; }'
+ '#trigger-parent {'
+ ' position: fixed;'
+ ' top: 100px;'
+ ' right: 17px;'
+ '}'
+ '</style>'
var $styles = $(styles).appendTo('head')
$('#qunit-fixture').append('<span id="trigger-parent"><a id="tt-trigger" title="If a_larger_text is written here, it won\'t fit using older broken version of BS">HOVER OVER ME</a></span>')
var $trigger = $('#tt-trigger')
$trigger
.on('shown.bs.tooltip', function () {
var $tip = $('.tooltip-inner')
var tipXrightEdge = $tip.offset().left + $tip.width()
var triggerXleftEdge = $trigger.offset().left
ok(tipXrightEdge < triggerXleftEdge, 'tooltip with auto left placement, when near the right edge of the viewport, gets left placement')
$trigger.bootstrapTooltip('hide')
})
.on('hidden.bs.tooltip', function () {
$styles.remove()
$(this).remove()
equal($('.tooltip').length, 0, 'tooltip removed from dom')
start()
})
.bootstrapTooltip({
container: 'body',
placement: 'auto left',
trigger: 'manual'
})
$trigger.bootstrapTooltip('show')
})
test('should not reload the tooltip on subsequent mouseenter events', function () {
var titleHtml = function () {
var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip')
@ -909,6 +950,7 @@ $(function () {
.on('hidden.bs.tooltip', function () {
$styles.remove()
$(this).remove()
equal($('.tooltip').length, 0, 'tooltip removed from dom')
start()
})
.bootstrapTooltip({

12
js/tooltip.js
View File

@ -188,13 +188,13 @@
if (autoPlace) {
var orgPlacement = placement
var $parent = this.$element.parent()
var parentDim = this.getPosition($parent)
var $container = this.options.container ? $(this.options.container) : this.$element.parent()
var containerDim = this.getPosition($container)
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' :
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 = placement == 'bottom' && pos.top + pos.height + actualHeight - containerDim.scroll > containerDim.height ? 'top' :
placement == 'top' && pos.top - containerDim.scroll - actualHeight < containerDim.top ? 'bottom' :
placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' :
placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' :
placement
$tip