Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
clean up styles
  • Loading branch information
fat committed Feb 6, 2013
1 parent 5e4db94 commit 4814281
Show file tree
Hide file tree
Showing 9 changed files with 152 additions and 102 deletions.
5 changes: 4 additions & 1 deletion docs/assets/css/bootstrap.css
Expand Up @@ -5290,7 +5290,6 @@ input[type="submit"].btn.btn-mini {
position: absolute; position: absolute;
z-index: 1030; z-index: 1030;
display: block; display: block;
padding: 5px;
font-size: 11px; font-size: 11px;
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
Expand All @@ -5304,18 +5303,22 @@ input[type="submit"].btn.btn-mini {
} }


.tooltip.top { .tooltip.top {
padding: 5px 0;
margin-top: -3px; margin-top: -3px;
} }


.tooltip.right { .tooltip.right {
padding: 0 5px;
margin-left: 3px; margin-left: 3px;
} }


.tooltip.bottom { .tooltip.bottom {
padding: 5px 0;
margin-top: 3px; margin-top: 3px;
} }


.tooltip.left { .tooltip.left {
padding: 0 5px;
margin-left: -3px; margin-left: -3px;
} }


Expand Down
57 changes: 52 additions & 5 deletions docs/assets/js/bootstrap-tooltip.js
Expand Up @@ -152,15 +152,58 @@
break break
} }


$tip this.applyPlacement(tp, placement)
.offset(tp)
.addClass(placement)
.addClass('in')

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


, applyPlacement: function(offset, placement){
var $tip = this.tip()
, width = $tip[0].offsetWidth
, height = $tip[0].offsetHeight
, actualWidth
, actualHeight
, delta
, replace

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

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){
this
.arrow()
.css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
}

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


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

, validate: function () { , validate: function () {
if (!this.$element[0].parentNode) { if (!this.$element[0].parentNode) {
this.hide() this.hide()
Expand Down
57 changes: 52 additions & 5 deletions docs/assets/js/bootstrap.js
Expand Up @@ -1194,15 +1194,58 @@
break break
} }


$tip this.applyPlacement(tp, placement)
.offset(tp)
.addClass(placement)
.addClass('in')

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


, applyPlacement: function(offset, placement){
var $tip = this.tip()
, width = $tip[0].offsetWidth
, height = $tip[0].offsetHeight
, actualWidth
, actualHeight
, delta
, replace

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

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){
this
.arrow()
.css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
}

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


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

, validate: function () { , validate: function () {
if (!this.$element[0].parentNode) { if (!this.$element[0].parentNode) {
this.hide() this.hide()
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/js/bootstrap.min.js

Large diffs are not rendered by default.

88 changes: 39 additions & 49 deletions js/bootstrap-tooltip.js
Expand Up @@ -153,66 +153,56 @@
} }


this.applyPlacement(tp, placement) this.applyPlacement(tp, placement)

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


, applyPlacement: function(offset, placement){ , applyPlacement: function(offset, placement){
var $tip var $tip = this.tip()
, width , width = $tip[0].offsetWidth
, height , height = $tip[0].offsetHeight
, actualWidth , actualWidth
, actualHeight , actualHeight
, delta , delta
, replace = false , replace

$tip = this.tip()

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

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

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"){ $tip
delta = 0 .offset(offset)
.addClass(placement)
.addClass('in')


if (offset.left < 0){ actualWidth = $tip[0].offsetWidth
delta = -offset.left * 2 actualHeight = $tip[0].offsetHeight
offset.left = 0
$tip.offset(offset) if (placement == 'top' && actualHeight != height) {
actualWidth = $tip[0].offsetWidth offset.top = offset.top + height - actualHeight
actualHeight = $tip[0].offsetHeight replace = true
} }


this.replaceArrow(delta - width + actualWidth, actualWidth, "left") if (placement == 'bottom' || placement == 'top') {
}else{ delta = 0
this.replaceArrow(actualHeight - height, actualHeight, "top")
}


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


, replaceArrow: function(delta, dimension, position){ this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
var $arrow = this.arrow() } else {
this.replaceArrow(actualHeight - height, actualHeight, 'top')
}


if (delta !== 0){ if (replace) $tip.offset(offset)
$arrow.css(position, 50 * (1 - delta / dimension) + "%") }
}else{
$arrow.css(position, "") , replaceArrow: function(delta, dimension, position){
this
.arrow()
.css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
} }
}


, setContent: function () { , setContent: function () {
var $tip = this.tip() var $tip = this.tip()
Expand Down Expand Up @@ -287,8 +277,8 @@
} }


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


, validate: function () { , validate: function () {
if (!this.$element[0].parentNode) { if (!this.$element[0].parentNode) {
Expand Down
3 changes: 0 additions & 3 deletions js/tests/index.html
Expand Up @@ -29,9 +29,6 @@
<script src="../../js/bootstrap-typeahead.js"></script> <script src="../../js/bootstrap-typeahead.js"></script>
<script src="../../js/bootstrap-affix.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 --> <!-- unit tests -->
<script src="unit/bootstrap-transition.js"></script> <script src="unit/bootstrap-transition.js"></script>
<script src="unit/bootstrap-alert.js"></script> <script src="unit/bootstrap-alert.js"></script>
Expand Down
13 changes: 0 additions & 13 deletions js/tests/unit/bootstrap-tooltip.css

This file was deleted.

21 changes: 0 additions & 21 deletions js/tests/unit/bootstrap-tooltip.js
Expand Up @@ -291,25 +291,4 @@ $(function () {
container.remove() container.remove()
}, 100) }, 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)
})
}) })
8 changes: 4 additions & 4 deletions less/tooltip.less
Expand Up @@ -13,10 +13,10 @@
line-height: 1.4; line-height: 1.4;
.opacity(0); .opacity(0);
&.in { .opacity(80); } &.in { .opacity(80); }
&.top { margin-top: -3px; padding: 5px 0;} &.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px;} &.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0;} &.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px;} &.left { margin-left: -3px; padding: 0 5px; }
} }


// Wrapper for the tooltip content // Wrapper for the tooltip content
Expand Down

0 comments on commit 4814281

Please sign in to comment.