mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-08 14:46:34 +02:00
Code Issues Releases Wiki Activity

add placement auto for tooltips + tests… kinda sad about this doe

Browse Source
This commit is contained in:
Jacob Thornton
2013-07-23 23:50:23 -07:00
parent 3cfa1c8a30
commit 217eb988b8
5 changed files with 99 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -341,4 +341,52 @@ $(function () {
ok(!$(".tooltip").length, 'tooltip removed')
})
test("tooltips should be placed dynamically, with the dynamic placement option", function () {
$.support.transition = false
var ttContainer = $('<div id="dynamic-tt-test"/>').css({
'height' : 400
, 'overflow' : 'hidden'
, 'position' : 'absolute'
, 'top' : 0
, 'left' : 0
, 'width' : 600})
.appendTo('body')
var topTooltip = $('<div style="display: inline-block; position: absolute; left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto'})
.tooltip('show')
ok($(".tooltip").is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
topTooltip.tooltip('hide')
var rightTooltip = $('<div style="display: inline-block; position: absolute; right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'right auto'})
.tooltip('show')
ok($(".tooltip").is('.left'), 'right positioned tooltip is dynamically positioned left')
rightTooltip.tooltip('hide')
var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto bottom'})
.tooltip('show')
ok($(".tooltip").is('.top'), 'bottom positioned tooltip is dynamically positioned top')
bottomTooltip.tooltip('hide')
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
.appendTo('#dynamic-tt-test')
.tooltip({placement: 'auto left'})
.tooltip('show')
ok($(".tooltip").is('.right'), 'left positioned tooltip is dynamically positioned right')
leftTooltip.tooltip('hide')
ttContainer.remove()
})
})

24
js/tooltip.js
View File

@@ -144,6 +144,10 @@
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
var autoToken = /\s?auto?\s?/i
var autoPlace = autoToken.test(placement)
if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
$tip
.detach()
.css({ top: 0, left: 0, display: 'block' })
@@ -156,6 +160,26 @@
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (autoPlace) {
var $parent = this.$element.parent()
var orgPlacement = placement
var docScroll = document.documentElement.scrollTop || document.body.scrollTop
var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth()
var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left
placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' :
placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' :
placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' :
placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' :
placement
$tip
.removeClass(orgPlacement)
.addClass(placement)
}
switch (placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}