diff options
-rw-r--r-- | bootstrap.css | 18 | ||||
-rw-r--r-- | bootstrap.min.css | 16 | ||||
-rw-r--r-- | docs/javascript.html | 4 | ||||
-rw-r--r-- | js/README.md | 2 | ||||
-rw-r--r-- | js/bootstrap-twipsy.js | 29 | ||||
-rw-r--r-- | lib/mixins.less | 4 | ||||
-rw-r--r-- | lib/popovers.less | 16 | ||||
-rw-r--r-- | lib/twipsy.less | 18 |
8 files changed, 52 insertions, 55 deletions
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) { <tr> <td>placement</td> <td>string</td> - <td>'above'</td> - <td>how to position the tooltip - above | below | left | right</td> + <td>'top'</td> + <td>how to position the tooltip - top | bottom | left | right</td> </tr> <tr> <td>selector</td> 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: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' 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; |