diff --git a/bootstrap.css b/bootstrap.css
index 6515b12b5f..ee80000c2b 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Dec 21 18:41:55 PST 2011
+ * Date: Thu Dec 22 19:09:49 PST 2011
*/
html, body {
margin: 0;
@@ -2366,19 +2366,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.8;
opacity: 0.8;
}
-.twipsy.above {
+.twipsy.top {
margin-top: -2px;
}
.twipsy.right {
margin-left: 2px;
}
-.twipsy.below {
+.twipsy.bottom {
margin-top: 2px;
}
.twipsy.left {
margin-left: -2px;
}
-.twipsy.above .twipsy-arrow {
+.twipsy.top .twipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
@@ -2394,7 +2394,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
-.twipsy.below .twipsy-arrow {
+.twipsy.bottom .twipsy-arrow {
top: 0;
left: 50%;
margin-left: -5px;
@@ -2434,19 +2434,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
display: none;
padding: 5px;
}
-.popover.above {
+.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
-.popover.below {
+.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
-.popover.above .arrow {
+.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
@@ -2462,7 +2462,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
-.popover.below .arrow {
+.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 4e4a1270ac..3f48b135eb 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -312,23 +312,23 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.modal-footer:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;}
.twipsy{position:absolute;z-index:1000;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.twipsy.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.twipsy.above{margin-top:-2px;}
+.twipsy.top{margin-top:-2px;}
.twipsy.right{margin-left:2px;}
-.twipsy.below{margin-top:2px;}
+.twipsy.bottom{margin-top:2px;}
.twipsy.left{margin-left:-2px;}
-.twipsy.above .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.twipsy.top .twipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.twipsy.left .twipsy-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
-.twipsy.below .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.twipsy.bottom .twipsy-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.twipsy.right .twipsy-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
.twipsy-inner{max-width:200px;padding:3px 8px;color:white;text-align:center;text-decoration:none;background-color:#000000;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.twipsy-arrow{position:absolute;width:0;height:0;}
-.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.above{margin-top:-5px;}
+.popover{position:absolute;top:0;left:0;z-index:1000;display:none;padding:5px;}.popover.top{margin-top:-5px;}
.popover.right{margin-left:5px;}
-.popover.below{margin-top:5px;}
+.popover.bottom{margin-top:5px;}
.popover.left{margin-left:-5px;}
-.popover.above .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
+.popover.top .arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;}
.popover.right .arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;}
-.popover.below .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
+.popover.bottom .arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;}
.popover.left .arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;}
.popover .arrow{position:absolute;width:0;height:0;}
.popover .inner{padding:3px;width:280px;overflow:hidden;background-color:#000000;background-color:rgba(0, 0, 0, 0.8);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
diff --git a/docs/javascript.html b/docs/javascript.html
index aed64d30ad..c9bb425a41 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -544,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
| placement |
string |
- 'above' |
- how to position the tooltip - above | below | left | right |
+ 'top' |
+ how to position the tooltip - top | bottom | left | right |
| selector |
diff --git a/js/README.md b/js/README.md
index 0d8d163a28..2f8e1716f5 100644
--- a/js/README.md
+++ b/js/README.md
@@ -49,7 +49,7 @@ examples:
backdrop: true
keyboard: false
- placement: 'above'
+ placement: 'top'
---
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index 018edb97e5..21cf7d20b1 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -99,6 +99,7 @@
, show: function () {
var $tip
+ , inside
, pos
, actualWidth
, actualHeight
@@ -113,12 +114,18 @@
$tip.addClass('fade')
}
+ placement = typeof this.options.placement == 'function' ?
+ thing.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ inside = /in/.test(placement)
+
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
- .prependTo(document.body)
+ .prependTo(inside ? this.$element : document.body)
- pos = $.extend({}, this.$element.offset(), {
+ pos = $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
@@ -126,13 +133,11 @@
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
- placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ])
-
- switch (placement) {
- case 'below':
+ switch (inside ? placement.split(' ')[1] : placement) {
+ case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
- case 'above':
+ case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
@@ -226,14 +231,6 @@
}
- /* TWIPSY PRIVATE METHODS
- * ====================== */
-
- function maybeCall ( thing, ctx, args ) {
- return typeof thing == 'function' ? thing.apply(ctx, args) : thing
- }
-
-
/* TWIPSY PLUGIN DEFINITION
* ======================== */
@@ -253,7 +250,7 @@
animation: true
, delay: 0
, selector: false
- , placement: 'above'
+ , placement: 'top'
, trigger: 'hover'
, title: ''
, template: ''
diff --git a/lib/mixins.less b/lib/mixins.less
index 0effdfa37a..41cf8890d1 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -283,7 +283,7 @@
// Popover arrows
// For tipsies and popovers
#popoverArrow {
- .above(@arrowWidth: 5px) {
+ .top(@arrowWidth: 5px) {
bottom: 0;
left: 50%;
margin-left: -@arrowWidth;
@@ -299,7 +299,7 @@
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black;
}
- .below(@arrowWidth: 5px) {
+ .bottom(@arrowWidth: 5px) {
top: 0;
left: 50%;
margin-left: -@arrowWidth;
diff --git a/lib/popovers.less b/lib/popovers.less
index ff875eaffb..5ecde09233 100644
--- a/lib/popovers.less
+++ b/lib/popovers.less
@@ -8,14 +8,14 @@
z-index: 1000;
display: none;
padding: 5px;
- &.above { margin-top: -5px; }
- &.right { margin-left: 5px; }
- &.below { margin-top: 5px; }
- &.left { margin-left: -5px; }
- &.above .arrow { #popoverArrow > .above(); }
- &.right .arrow { #popoverArrow > .right(); }
- &.below .arrow { #popoverArrow > .below(); }
- &.left .arrow { #popoverArrow > .left(); }
+ &.top { margin-top: -5px; }
+ &.right { margin-left: 5px; }
+ &.bottom { margin-top: 5px; }
+ &.left { margin-left: -5px; }
+ &.top .arrow { #popoverArrow > .top(); }
+ &.right .arrow { #popoverArrow > .right(); }
+ &.bottom .arrow { #popoverArrow > .bottom(); }
+ &.left .arrow { #popoverArrow > .left(); }
.arrow {
position: absolute;
width: 0;
diff --git a/lib/twipsy.less b/lib/twipsy.less
index 05f121a5dd..abd0599f4e 100644
--- a/lib/twipsy.less
+++ b/lib/twipsy.less
@@ -9,15 +9,15 @@
padding: 5px;
font-size: 11px;
.opacity(0);
- &.in { .opacity(80); }
- &.above { margin-top: -2px; }
- &.right { margin-left: 2px; }
- &.below { margin-top: 2px; }
- &.left { margin-left: -2px; }
- &.above .twipsy-arrow { #popoverArrow > .above(); }
- &.left .twipsy-arrow { #popoverArrow > .left(); }
- &.below .twipsy-arrow { #popoverArrow > .below(); }
- &.right .twipsy-arrow { #popoverArrow > .right(); }
+ &.in { .opacity(80); }
+ &.top { margin-top: -2px; }
+ &.right { margin-left: 2px; }
+ &.bottom { margin-top: 2px; }
+ &.left { margin-left: -2px; }
+ &.top .twipsy-arrow { #popoverArrow > .top(); }
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
+ &.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
max-width: 200px;