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

diff --git a/bootstrap.css b/bootstrap.css
index 6515b12b5f29b6f16806a1d67a4da349ad433f9c..ee80000c2b6e21d5d84a37ff3535a2699853a145 100644 (file)
--- 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 4e4a1270ac1a6b146ff8c3d6a59d0d4bf210620c..3f48b135eb70277bec44efbfbb1b472827e09093 100644 (file)
--- 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 aed64d30ad7bf5dcdc09f389943284c6a0ed9005..c9bb425a4162cdad5a1fc816fd30584a784c560e 100644 (file)
--- 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 0d8d163a28bcbdab5e06d8fecb65f4f345bc09db..2f8e1716f5271dce8a8f52ae91b577c7b7d7b9a9 100644 (file)
--- 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 018edb97e55434e003e62db890a2912049efb9e0..21cf7d20b1c690a6d8a77349c2e55588f7a5ad0e 100644 (file)
--- 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 0effdfa37ae5df0ad3dfaa4057111ae2e4cd68b2..41cf8890d184e12cef889b58b0c6ae651db0bcde 100644 (file)
--- 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 ff875eaffbe9c784bc120196491ff10744fbe1a5..5ecde0923309a42f22a40f49cfdc843c37c593ec 100644 (file)
--- 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 05f121a5dd207caa48615aa523d559b00c7049cf..abd0599f4eb2e1fcbfeb9d446c056a9c37f856c5 100644 (file)
--- 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;