Skip to content

B
bootstrap
Commit 87ac8182 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

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

parent efacac0d
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 55 deletions
bootstrap.css
View file @ 87ac8182
......@@ -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;
......
bootstrap.min.css
View file @ 87ac8182
......@@ -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);}
......
docs/javascript.html
View file @ 87ac8182
......@@ -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>
......
js/README.md
View file @ 87ac8182
......@@ -49,7 +49,7 @@ examples:
backdrop: true
keyboard: false
placement: 'above'
placement: 'top'
---
......
js/bootstrap-twipsy.js
View file @ 87ac8182
......@@ -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>'
......
lib/mixins.less
View file @ 87ac8182
......@@ -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;
......
lib/popovers.less
View file @ 87ac8182
......@@ -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;
......
lib/twipsy.less
View file @ 87ac8182
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment