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:
parent
01b465928e
commit
6803ff70f9
65
js/bootstrap-tooltip.js
vendored
65
js/bootstrap-tooltip.js
vendored
@ -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()
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user