Skip to content

B
bootstrap
Commit 48142815 authored by fat's avatar fat
Browse files
Options

clean up styles

parent 5e4db94c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 152 additions and 102 deletions
docs/assets/css/bootstrap.css
View file @ 48142815
...@@ -5290,7 +5290,6 @@ input[type="submit"].btn.btn-mini { ...@@ -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;
...@@ -5304,18 +5303,22 @@ input[type="submit"].btn.btn-mini { ...@@ -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;
} }
......
docs/assets/js/bootstrap-tooltip.js
View file @ 48142815
...@@ -152,15 +152,58 @@ ...@@ -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()
...@@ -233,6 +276,10 @@ ...@@ -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()
......
docs/assets/js/bootstrap.js
View file @ 48142815
...@@ -1194,15 +1194,58 @@ ...@@ -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()
...@@ -1275,6 +1318,10 @@ ...@@ -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()
......
docs/assets/js/bootstrap.min.js
View file @ 48142815
This diff is collapsed.
js/bootstrap-tooltip.js
View file @ 48142815
...@@ -153,66 +153,56 @@ ...@@ -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()
...@@ -287,8 +277,8 @@ ...@@ -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) {
......
js/tests/index.html
View file @ 48142815
...@@ -29,9 +29,6 @@ ...@@ -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>
......
js/tests/unit/bootstrap-tooltip.css deleted 100644 → 0
View file @ 5e4db94c
.tooltip{
position: absolute;
}
.tooltip-inner{
max-width: 200px;
}
.tooltip.top .tooltip-arrow{
position: absolute;
}
\ No newline at end of file
js/tests/unit/bootstrap-tooltip.js
View file @ 48142815
...@@ -291,25 +291,4 @@ $(function () { ...@@ -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)
})
}) })
less/tooltip.less
View file @ 48142815
...@@ -13,10 +13,10 @@ ...@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment