0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

Tooltip positionning on special cases

This commit is contained in:
Guillaume Gautreau 2013-01-26 13:50:26 +01:00
parent 01b465928e
commit 6803ff70f9
2 changed files with 65 additions and 9 deletions

View File

@ -152,15 +152,68 @@
break
}
$tip
.offset(tp)
.addClass(placement)
.addClass('in')
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');
actualWidth = $tip[0].offsetWidth;
actualHeight = $tip[0].offsetHeight;
if (placement == "top" && actualHeight != actualWidth){
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()
, title = this.getTitle()
@ -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()

View File

@ -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