Skip to content

Commit

Permalink
Merge branch '2.3.0-wip' of git://github.com/ghusse/bootstrap into gh…
Browse files Browse the repository at this point in the history
…usse-2.3.0-wip
  • Loading branch information
fat committed Feb 6, 2013
2 parents a4b31d3 + ee71fb4 commit 5e4db94
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 8 deletions.
63 changes: 60 additions & 3 deletions js/bootstrap-tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,14 +152,67 @@
break
}

$tip
.offset(tp)
this.applyPlacement(tp, placement)

this.$element.trigger('shown')
}
}

, applyPlacement: function(offset, placement){
var $tip
, width
, height
, actualWidth
, actualHeight
, delta
, replace = false

$tip = this.tip()

width = $tip[0].offsetWidth
height = $tip[0].offsetHeight

$tip
.offset(offset)
.addClass(placement)
.addClass('in')

this.$element.trigger('shown')
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight

if (placement == "top" && actualHeight != height){
offset.top = offset.top + height - actualHeight
replace = true
}

if (placement == "bottom" || placement == "top"){
delta = 0

if (offset.left < 0){
delta = -offset.left * 2
offset.left = 0
$tip.offset(offset)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
}

this.replaceArrow(delta - width + actualWidth, actualWidth, "left")
}else{
this.replaceArrow(actualHeight - height, actualHeight, "top")
}

if (replace) $tip.offset(offset)
}

, replaceArrow: function(delta, dimension, position){
var $arrow = this.arrow()

if (delta !== 0){
$arrow.css(position, 50 * (1 - delta / dimension) + "%")
}else{
$arrow.css(position, "")
}
}

, setContent: function () {
var $tip = this.tip()
Expand Down Expand Up @@ -233,6 +286,10 @@
return this.$tip = this.$tip || $(this.options.template)
}

, arrow: function(){
return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
}

, validate: function () {
if (!this.$element[0].parentNode) {
this.hide()
Expand Down
3 changes: 3 additions & 0 deletions js/tests/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@
<script src="../../js/bootstrap-typeahead.js"></script>
<script src="../../js/bootstrap-affix.js"></script>

<!-- Needed for testing -->
<link rel="stylesheet" type="text/css" href="unit/bootstrap-tooltip.css" />

<!-- unit tests -->
<script src="unit/bootstrap-transition.js"></script>
<script src="unit/bootstrap-alert.js"></script>
Expand Down
13 changes: 13 additions & 0 deletions js/tests/unit/bootstrap-tooltip.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@


.tooltip{
position: absolute;
}

.tooltip-inner{
max-width: 200px;
}

.tooltip.top .tooltip-arrow{
position: absolute;
}
61 changes: 61 additions & 0 deletions js/tests/unit/bootstrap-tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,4 +251,65 @@ $(function () {
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
tooltip.tooltip('hide')
})

test("should place tooltip inside window", function(){
var container = $("<div />").appendTo("body")
.css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
, tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
.css({position: "absolute", top:0, left: 0})
.appendTo(container)
.tooltip({placement: "top", animate: false})
.tooltip("show")

stop()

setTimeout(function(){
ok($(".tooltip").offset().left >= 0)

start()
container.remove()
}, 100)
})

test("should place tooltip on top of element", function(){
var container = $("<div />").appendTo("body")
.css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
, p = $("<p style='margin-top:200px' />").appendTo(container)
, tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
.css({marginTop: 200})
.appendTo(p)
.tooltip({placement: "top", animate: false})
.tooltip("show")

stop()

setTimeout(function(){
var tooltip = container.find(".tooltip")

start()
ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
container.remove()
}, 100)
})

test("arrow should point to element", function(){
var container = $("<div />").appendTo("body")
.css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
, p = $("<p style='margin-top:200px' />").appendTo(container)
, tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
.css({marginTop: 200})
.appendTo(p)
.tooltip({placement: "top", animate: false})
.tooltip("show")

stop()

setTimeout(function(){
var arrow = container.find(".tooltip-arrow")

start()
ok(Math.abs(arrow.offset().left - tooltiped.offset().left - tooltiped.outerWidth()/2) <= 1)
container.remove()
}, 100)
})
})
9 changes: 4 additions & 5 deletions less/tooltip.less
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@
z-index: @zindexTooltip;
display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
line-height: 1.4;
.opacity(0);
&.in { .opacity(80); }
&.top { margin-top: -3px; }
&.right { margin-left: 3px; }
&.bottom { margin-top: 3px; }
&.left { margin-left: -3px; }
&.top { margin-top: -3px; padding: 5px 0;}
&.right { margin-left: 3px; padding: 0 5px;}
&.bottom { margin-top: 3px; padding: 5px 0;}
&.left { margin-left: -3px; padding: 0 5px;}
}

// Wrapper for the tooltip content
Expand Down

0 comments on commit 5e4db94

Please sign in to comment.