mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 23:26:40 +02:00
Code Issues Releases Wiki Activity

change above below to top bottom and add "inside" placement option

Browse Source
This commit is contained in:
Jacob Thornton
2011-12-22 19:10:32 -08:00
parent efacac0d6c
commit 87ac818253
8 changed files with 52 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
bootstrap.css vendored
View File

@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0 * http://www.apache.org/licenses/LICENSE-2.0
* *
* Designed and built with all the love in the world @twitter by @mdo and @fat. * 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 { html, body {
margin: 0; margin: 0;
@@ -2366,19 +2366,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
-moz-opacity: 0.8; -moz-opacity: 0.8;
opacity: 0.8; opacity: 0.8;
} }
.twipsy.above { .twipsy.top {
margin-top: -2px; margin-top: -2px;
} }
.twipsy.right { .twipsy.right {
margin-left: 2px; margin-left: 2px;
} }
.twipsy.below { .twipsy.bottom {
margin-top: 2px; margin-top: 2px;
} }
.twipsy.left { .twipsy.left {
margin-left: -2px; margin-left: -2px;
} }
.twipsy.above .twipsy-arrow { .twipsy.top .twipsy-arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -5px; 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-bottom: 5px solid transparent;
border-left: 5px solid #000000; border-left: 5px solid #000000;
} }
.twipsy.below .twipsy-arrow { .twipsy.bottom .twipsy-arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;
@@ -2434,19 +2434,19 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
display: none; display: none;
padding: 5px; padding: 5px;
} }
.popover.above { .popover.top {
margin-top: -5px; margin-top: -5px;
} }
.popover.right { .popover.right {
margin-left: 5px; margin-left: 5px;
} }
.popover.below { .popover.bottom {
margin-top: 5px; margin-top: 5px;
} }
.popover.left { .popover.left {
margin-left: -5px; margin-left: -5px;
} }
.popover.above .arrow { .popover.top .arrow {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -5px; 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-bottom: 5px solid transparent;
border-right: 5px solid #000000; border-right: 5px solid #000000;
} }
.popover.below .arrow { .popover.bottom .arrow {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -5px; margin-left: -5px;

16
bootstrap.min.css vendored
View File

@@ -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:after{clear:both;}
.modal-footer .btn{float:right;margin-left:5px;} .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{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.right{margin-left:2px;}
.twipsy.below{margin-top:2px;} .twipsy.bottom{margin-top:2px;}
.twipsy.left{margin-left:-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.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.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-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;} .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.right{margin-left:5px;}
.popover.below{margin-top:5px;} .popover.bottom{margin-top:5px;}
.popover.left{margin-left:-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.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.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 .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);} .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);}

4
docs/javascript.html
View File

@@ -544,8 +544,8 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<tr> <tr>
<td>placement</td> <td>placement</td>
<td>string</td> <td>string</td>
<td>'above'</td> <td>'top'</td>
<td>how to position the tooltip - above | below | left | right</td> <td>how to position the tooltip - top | bottom | left | right</td>
</tr> </tr>
<tr> <tr>
<td>selector</td> <td>selector</td>

2
js/README.md
View File

@@ -49,7 +49,7 @@ examples:
backdrop: true backdrop: true
keyboard: false keyboard: false
placement: 'above' placement: 'top'
--- ---

29
js/bootstrap-twipsy.js vendored
View File

@@ -99,6 +99,7 @@
, show: function () { , show: function () {
var $tip var $tip
, inside
, pos , pos
, actualWidth , actualWidth
, actualHeight , actualHeight
@@ -113,12 +114,18 @@
$tip.addClass('fade') $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 $tip
.remove() .remove()
.css({ top: 0, left: 0, display: 'block' }) .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 width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight , height: this.$element[0].offsetHeight
}) })
@@ -126,13 +133,11 @@
actualWidth = $tip[0].offsetWidth actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight actualHeight = $tip[0].offsetHeight
placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
switch (placement) {
case 'below':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2} tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break break
case 'above': case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2} tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break break
case 'left': 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 /* TWIPSY PLUGIN DEFINITION
* ======================== */ * ======================== */
@@ -253,7 +250,7 @@
animation: true animation: true
, delay: 0 , delay: 0
, selector: false , selector: false
, placement: 'above' , placement: 'top'
, trigger: 'hover' , trigger: 'hover'
, title: '' , title: ''
, template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>'

4
lib/mixins.less
View File

@@ -283,7 +283,7 @@
// Popover arrows // Popover arrows
// For tipsies and popovers // For tipsies and popovers
#popoverArrow { #popoverArrow {
.above(@arrowWidth: 5px) { .top(@arrowWidth: 5px) {
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -@arrowWidth; margin-left: -@arrowWidth;
@@ -299,7 +299,7 @@
border-bottom: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid @black; border-left: @arrowWidth solid @black;
} }
.below(@arrowWidth: 5px) { .bottom(@arrowWidth: 5px) {
top: 0; top: 0;
left: 50%; left: 50%;
margin-left: -@arrowWidth; margin-left: -@arrowWidth;

16
lib/popovers.less
View File

@@ -8,14 +8,14 @@
z-index: 1000; z-index: 1000;
display: none; display: none;
padding: 5px; padding: 5px;
&.above { margin-top: -5px; } &.top { margin-top: -5px; }
&.right { margin-left: 5px; } &.right { margin-left: 5px; }
&.below { margin-top: 5px; } &.bottom { margin-top: 5px; }
&.left { margin-left: -5px; } &.left { margin-left: -5px; }
&.above .arrow { #popoverArrow > .above(); } &.top .arrow { #popoverArrow > .top(); }
&.right .arrow { #popoverArrow > .right(); } &.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); } &.bottom .arrow { #popoverArrow > .bottom(); }
&.left .arrow { #popoverArrow > .left(); } &.left .arrow { #popoverArrow > .left(); }
.arrow { .arrow {
position: absolute; position: absolute;
width: 0; width: 0;

18
lib/twipsy.less
View File

@@ -9,15 +9,15 @@
padding: 5px; padding: 5px;
font-size: 11px; font-size: 11px;
.opacity(0); .opacity(0);
&.in { .opacity(80); } &.in { .opacity(80); }
&.above { margin-top: -2px; } &.top { margin-top: -2px; }
&.right { margin-left: 2px; } &.right { margin-left: 2px; }
&.below { margin-top: 2px; } &.bottom { margin-top: 2px; }
&.left { margin-left: -2px; } &.left { margin-left: -2px; }
&.above .twipsy-arrow { #popoverArrow > .above(); } &.top .twipsy-arrow { #popoverArrow > .top(); }
&.left .twipsy-arrow { #popoverArrow > .left(); } &.left .twipsy-arrow { #popoverArrow > .left(); }
&.below .twipsy-arrow { #popoverArrow > .below(); } &.bottom .twipsy-arrow { #popoverArrow > .bottom(); }
&.right .twipsy-arrow { #popoverArrow > .right(); } &.right .twipsy-arrow { #popoverArrow > .right(); }
} }
.twipsy-inner { .twipsy-inner {
max-width: 200px; max-width: 200px;