diff options
author | Jacob Thornton <jacobthornton@gmail.com> | 2012-01-12 09:42:55 +0400 |
---|---|---|
committer | Jacob Thornton <jacobthornton@gmail.com> | 2012-01-12 09:42:55 +0400 |
commit | 6f2f947a4309a8fdeb7067612447c0f1a15dcfd9 (patch) | |
tree | d634c55bd53f807a4c6d5265462bcf1b03cbfe24 | |
parent | 51e4e77034e14074cb442138e84b98efd288ccfd (diff) |
add build tool for js + rename twipsy to tooltip + lots of little doc cleanup
-rw-r--r-- | Makefile | 2 | ||||
-rw-r--r-- | bootstrap.css | 29 | ||||
-rw-r--r-- | bootstrap.min.css | 26 | ||||
-rw-r--r-- | docs/assets/css/docs.css | 9 | ||||
-rw-r--r-- | docs/assets/js/application.js | 83 | ||||
-rw-r--r-- | docs/components.html | 18 | ||||
-rw-r--r-- | docs/javascript.html | 159 | ||||
-rw-r--r-- | docs/scaffolding.html | 18 | ||||
-rw-r--r-- | js/bootstrap-popover.js | 8 | ||||
-rw-r--r-- | js/bootstrap-tooltip.js (renamed from js/bootstrap-twipsy.js) | 38 | ||||
-rw-r--r-- | js/bootstrap-typeahead.js | 2 | ||||
-rw-r--r-- | js/tests/index.html | 4 | ||||
-rw-r--r-- | js/tests/unit/bootstrap-twipsy.js | 48 | ||||
-rw-r--r-- | lib/bootstrap.less | 2 | ||||
-rw-r--r-- | lib/button-groups.less | 1 | ||||
-rw-r--r-- | lib/tooltip.less (renamed from lib/twipsy.less) | 20 | ||||
-rw-r--r-- | lib/variables.less | 2 |
17 files changed, 297 insertions, 172 deletions
@@ -31,7 +31,7 @@ uglify: uglifyjs -o js/min/bootstrap-scrollspy.js js/bootstrap-scrollspy.js;\ uglifyjs -o js/min/bootstrap-tabs.js js/bootstrap-tab.js;\ uglifyjs -o js/min/bootstrap-transitions.js js/bootstrap-transition.js;\ - uglifyjs -o js/min/bootstrap-twipsy.js js/bootstrap-twipsy.js;\ + uglifyjs -o js/min/bootstrap-tooltip.js js/bootstrap-tooltip.js;\ else \ echo "You must have the UGLIFYJS minifier installed in order to minify Bootstrap's js."; \ echo "You can install it by running: npm install uglify-js -g"; \ diff --git a/bootstrap.css b/bootstrap.css index 32f8b9da43..09b7b41821 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: Mon Jan 9 09:15:32 PST 2012 + * Date: Wed Jan 11 20:37:24 PST 2012 */ html, body { margin: 0; @@ -2208,7 +2208,7 @@ i { float: right; margin-left: 5px; } -.twipsy { +.tooltip { position: absolute; z-index: 1020; display: block; @@ -2219,24 +2219,24 @@ i { -moz-opacity: 0; opacity: 0; } -.twipsy.in { +.tooltip.in { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } -.twipsy.top { +.tooltip.top { margin-top: -2px; } -.twipsy.right { +.tooltip.right { margin-left: 2px; } -.twipsy.bottom { +.tooltip.bottom { margin-top: 2px; } -.twipsy.left { +.tooltip.left { margin-left: -2px; } -.twipsy.top .twipsy-arrow { +.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; @@ -2244,7 +2244,7 @@ i { border-right: 5px solid transparent; border-top: 5px solid #000000; } -.twipsy.left .twipsy-arrow { +.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; @@ -2252,7 +2252,7 @@ i { border-bottom: 5px solid transparent; border-left: 5px solid #000000; } -.twipsy.bottom .twipsy-arrow { +.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; @@ -2260,7 +2260,7 @@ i { border-right: 5px solid transparent; border-bottom: 5px solid #000000; } -.twipsy.right .twipsy-arrow { +.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; @@ -2268,7 +2268,7 @@ i { border-bottom: 5px solid transparent; border-right: 5px solid #000000; } -.twipsy-inner { +.tooltip-inner { max-width: 200px; padding: 3px 8px; color: white; @@ -2279,7 +2279,7 @@ i { -moz-border-radius: 4px; border-radius: 4px; } -.twipsy-arrow { +.tooltip-arrow { position: absolute; width: 0; height: 0; @@ -2619,6 +2619,9 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -moz-border-radius: 5px; border-radius: 5px; } +.btn-group.open .dropdown-menu.large { + top: 40px; +} .btn-group.open .dropdown-toggle { background-image: none; -webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); diff --git a/bootstrap.min.css b/bootstrap.min.css index e535f1e51a..bf7cd42003 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -412,17 +412,17 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou .modal-footer{padding:14px 15px 15px;margin-bottom:0;background-color:#f5f5f5;border-top:1px solid #ddd;-webkit-border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;border-radius:0 0 6px 6px;-webkit-box-shadow:inset 0 1px 0 #ffffff;-moz-box-shadow:inset 0 1px 0 #ffffff;box-shadow:inset 0 1px 0 #ffffff;zoom:1;}.modal-footer:before,.modal-footer:after{display:table;*display:inline;content:"";zoom:1;} .modal-footer:after{clear:both;} .modal-footer .btn{float:right;margin-left:5px;} -.twipsy{position:absolute;z-index:1020;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.top{margin-top:-2px;} -.twipsy.right{margin-left:2px;} -.twipsy.bottom{margin-top:2px;} -.twipsy.left{margin-left:-2px;} -.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.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;} +.tooltip{position:absolute;z-index:1020;display:block;visibility:visible;padding:5px;font-size:11px;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}.tooltip.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;} +.tooltip.top{margin-top:-2px;} +.tooltip.right{margin-left:2px;} +.tooltip.bottom{margin-top:2px;} +.tooltip.left{margin-left:-2px;} +.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #000000;} +.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid #000000;} +.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #000000;} +.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:5px solid #000000;} +.tooltip-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;} +.tooltip-arrow{position:absolute;width:0;height:0;} .popover{position:absolute;top:0;left:0;z-index:1010;display:none;padding:5px;}.popover.top{margin-top:-5px;} .popover.right{margin-left:5px;} .popover.bottom{margin-top:5px;} @@ -460,7 +460,7 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .btn-group .btn.large:last-child,.btn-group .large.dropdown-toggle{-webkit-border-top-right-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-moz-border-radius-bottomright:6px;border-bottom-right-radius:6px;} .btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:2;} .btn-group .dropdown-toggle{padding-left:8px;padding-right:8px;-webkit-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 1px 0 0 rgba(255, 255, 255, 0.125),0 1px 2px rgba(0, 0, 0, 0.05);} -.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;} +.btn-group.open .dropdown-menu{display:block;top:30px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.btn-group.open .dropdown-menu.large{top:40px;} .btn-group.open .dropdown-toggle{background-image:none;-webkit-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);} .btn .caret{margin-top:6px;margin-left:0;} .primary .caret,.danger .caret,.info .caret,.success .caret{border-top-color:#fff;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;} @@ -518,4 +518,4 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105, .show{display:block;} .invisible{visibility:hidden;} .hidden{display:none;visibility:hidden;} -@media (max-width: 480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width: 768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} +@media (max-width:480px){.navbar .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .navbar .nav,.navbar .nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .navbar .nav>li{float:none;display:none;} .navbar .nav>li>a{float:none;background-color:#222;} .navbar .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar .nav>.active>a{background-color:transparent;} .navbar .nav>.active>a:hover{background-color:#333;} .navbar .nav>.active>a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .navbar .nav:hover>li{display:block;} .navbar .nav:hover>li>a:hover{background-color:#333;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal.fade.in{top:auto;} .modal-header .close{padding:10px;}}@media (max-width:768px){.navbar-fixed{position:absolute;} .navbar-fixed .nav{float:none;} .container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width:768px) and (max-width:940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f370672037..134224e567 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -466,7 +466,7 @@ form.well { /* Icons ------------------------- */ .the-icons { - + } .the-icons i { display: block; @@ -481,6 +481,13 @@ form.well { width: 100px; } +#javascript input[type='checkbox'] { +display: inline; +margin-left: 6px; +position: relative; +top: -1px; +} + /* Responsive Docs -------------------------------------------------- */ diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index c31fc97a06..0e14a53508 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -48,18 +48,18 @@ $(function(){ setTimeout(function () { $(el).select() }, 0) }) - if ($.fn.twipsy) { + if ($.fn.tooltip) { // position static twipsies for components page if ($(".twipsies a").length) { $(window).on('load resize', function () { $(".twipsies a").each(function () { $(this) - .twipsy({ + .tooltip({ placement: $(this).attr('title') , trigger: 'manual' }) - .twipsy('show') + .tooltip('show') }) }) } @@ -67,7 +67,7 @@ $(function(){ // add tipsies to grid for scaffolding if ($('#grid-system').length) { - $('#grid-system').twipsy({ + $('#grid-system').tooltip({ selector: '.show-grid > div' , title: function () { return $(this).width() + 'px' } }) @@ -75,4 +75,79 @@ $(function(){ } } + // javascript build logic + + var inputs = $("#javascript input") + + // toggle all plugin checkboxes + $('#selectAll').on('click', function (e) { + e.preventDefault() + inputs.attr('checked', !inputs.is(':checked')) + }) + + // handle build button dropdown + var buildTypes = $('#javascriptBuilder .dropdown-menu li').on('click', function () { + buildTypes.removeClass('active') + $(this).addClass('active') + }) + + // request built javascript + $('#javascriptBuild').on('click', function () { + + var names = $("#javascript input:checked") + .map(function () { return this.value }) + .toArray() + + if (names[names.length - 1] == 'bootstrap-transition.js') { + names.unshift(names.pop()) + } + + $.ajax({ + type: 'POST' + , dataType: 'jsonpi' + , params: { + branch: '2.0-wip' + , dir: 'js' + , filenames: names + , compress: buildTypes.first().hasClass('active') + } + , url: "http://bootstrap.herokuapp.com" + }) + }) + }) + + +// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi +// by the talented Ben Vinegar +!function($) { + $.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) { + var url = opts.url; + + return { + send: function(_, completeCallback) { + var name = 'jQuery_iframe_' + jQuery.now(), + iframe, form; + + iframe = $('<iframe>') + .attr('name', name) + .appendTo('head'); + + form = $('<form>') + .attr('method', opts.type) // GET or POST + .attr('action', url) + .attr('target', name); + + $.each(opts.params, function(k, v) { + $('<input>') + .attr('type', 'hidden') + .attr('name', k) + .attr('value', v) + .appendTo(form); + }); + + form.appendTo('body').submit(); + } + }; + }); +}(jQuery);
\ No newline at end of file diff --git a/docs/components.html b/docs/components.html index ee1634ccac..873bbf6823 100644 --- a/docs/components.html +++ b/docs/components.html @@ -147,7 +147,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn primary" href="#">Action</a> <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -158,7 +158,7 @@ <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> - </div><!-- /btn-group --> + </div><!-- /btn-group --> <div class="btn-group"> <a class="btn danger" href="#">Danger</a> <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> @@ -214,7 +214,7 @@ </div> </div> </section> - + <!-- Nav, Tabs, & Pills @@ -331,7 +331,7 @@ <pre class="prettyprint linenums"> <ul class="nav tabs"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -363,7 +363,7 @@ <pre class="prettyprint linenums"> <ul class="nav pills"> <li class="dropdown"> - <a class="dropdown-toggle" + <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown @@ -483,7 +483,7 @@ <p><a class="btn" href="./javascript.html/#tabs">Get the javascript →</a></p> </div> </div> - + <h3>Straightforward markup</h3> <p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p> <pre class="prettyprint linenums"> @@ -509,7 +509,7 @@ <div class="span4"> <p>Swap the order of your HTML—placing <code>.tabs</code> after <code>.tab-content</code>—for tabs on the bottom.</p> </div> ---> +--> <div class="span4"> <h4>Tabs on the bottom</h4> <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p> @@ -1035,7 +1035,7 @@ </pre> </div> </div><!-- /row --> - + <br> <!-- Block messages --> @@ -1195,7 +1195,7 @@ <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-tab.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> </html> diff --git a/docs/javascript.html b/docs/javascript.html index 119066895c..51f3d691e0 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -54,7 +54,6 @@ </header> - <!-- Using Javascript w/ Bootstrap ================================================== --> <section id="javascript"> @@ -63,61 +62,100 @@ </div> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#modals">Modals</a></h3> - <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + <label> + <h3><a href="./javascript.html#modals">Modals</a><input checked="true" value="bootstrap-modal.js" type="checkbox"></h3> + <p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#dropdowns">Dropdowns</a></h3> - <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + <label> + <h3><a href="./javascript.html#dropdowns">Dropdowns</a><input checked="true" value="bootstrap-dropdown.js" type="checkbox"></h3> + <p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#scrollspy">Scrollspy</a></h3> - <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> + <label> + <h3><a href="./javascript.html#scrollspy">Scrollspy</a><input checked="true" value="bootstrap-scrollspy.js" type="checkbox"></h3> + <p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#tabs">Togglable tabs</a></h3> - <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> + <label> + <h3><a href="./javascript.html#tabs">Togglable tabs</a><input checked="true" value="bootstrap-tab.js" type="checkbox"></h3> + <p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p> + </label> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#twipsy">Twipsy tooltips</a></h3> - <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p> + <label> + <h3><a href="./javascript.html#tooltips">Tooltips</a><input checked="true" value="bootstrap-tooltip.js" type="checkbox"></h3> + <p>A new take on the jQuery Tipsy plugin, Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small></h3> - <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> - <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + <label> + <h3><a href="./javascript.html#popovers">Popovers</a> <small class="muted">*</small><input checked="true" value="bootstrap-popover.js" type="checkbox"></h3> + <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> + <p class="muted"><strong>*</strong> Requires <a href="#tooltips">Tooltips</a> to be included</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#alerts">Alert messages</a></h3> - <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + <label> + <h3><a href="./javascript.html#alerts">Alert messages</a><input checked="true" value="bootstrap-alert.js" type="checkbox"></h3> + <p>The alert plugin is a tiny class for adding close functionality to alerts.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#buttons">Buttons</a></h3> - <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + <label> + <h3><a href="./javascript.html#buttons">Buttons</a><input checked="true" value="bootstrap-button.js" type="checkbox"></h3> + <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p> + </label> </div> </div> <!-- /row --> <div class="row"> <div class="span3"> - <h3><a href="./javascript.html#collapse">Collapse</a></h3> - <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + <label> + <h3><a href="./javascript.html#collapse">Collapse</a><input checked="true" value="bootstrap-collapse.js" type="checkbox"></h3> + <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#carousel">Carousel</a></h3> - <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> + <label> + <h3><a href="./javascript.html#carousel">Carousel</a><input checked="true" value="bootstrap-carousel.js" type="checkbox"></h3> + <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#typeahead">Typeahead</a></h3> - <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + <label> + <h3><a href="./javascript.html#typeahead">Typeahead</a><input checked="true" value="bootstrap-typeahead.js" type="checkbox"></h3> + <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p> + </label> </div> <div class="span3"> - <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small></h3> - <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> - <p class="muted"><strong>*</strong> Required for animation in plugins</p> + <label> + <h3><a href="./javascript.html#transitions">Transitions</a> <small class="muted">*</small><input value="bootstrap-transition.js" checked="true" type="checkbox"></h3> + <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p> + <p class="muted"><strong>*</strong> Required for animation in plugins</p> + </label> </div> </div> <!-- /row --> + <div class="row"> + <div class="span5"> + <div class="btn-group" id="javascriptBuilder"> + <a id="javascriptBuild" class="btn primary large" href="#">Download Source</a> + <a class="btn primary large dropdown-toggle" data-toggle="dropdown" href="#"> + <span class="caret"></span> + </a> + <ul class="dropdown-menu large"> + <li class="active"><a href="#">Compressed</a></li> + <li><a href="#">Uncompressed</a></li> + </ul> + </div> + </div> + </div> <hr> + <a id="selectAll" href="#" style="float:right">Select/Unselect All Plugins</a> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p> </section> @@ -169,8 +207,8 @@ <h4>Popover in a modal</h4> <p>This <a href="#" class="btn" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> - <h4>Twipsy tooltips in a modal</h4> - <p><a href="#" class="twipsy-test" title="Tooltip">This link</a> and <a href="#" class="twipsy-test" title="Tooltip">that link</a> should have Twipsy tooltips on hover.</p> + <h4>Tooltips in a modal</h4> + <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> </div> <div class="modal-footer"> <a href="#" class="btn primary">Save changes</a> @@ -596,30 +634,29 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </section> - - <!-- Twipsy + <!-- Tooltips ================================================== --> - <section id="twipsy"> + <section id="tooltips"> <div class="page-header"> - <h1>Twipsy <small>bootstrap-twipsy.js</small></h1> + <h1>Tooltips <small>bootstrap-tooltip.js</small></h1> </div> <div class="row"> <div class="span3 columns"> - <h3>About Twipsy tooltips</h3> - <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</p> - <a href="../js/bootstrap-twipsy.js" target="_blank" class="btn">Download file</a> + <h3>About Tooltips</h3> + <p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p> + <a href="../js/bootstrap-tooltip.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> - <h2>Example use of Twipsy</h2> + <h2>Example use of Tooltips</h2> <p>Hover over the links below to see tooltips:</p> - <div class="twipsy-demo well"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='twipsy' title="first twipsy">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. + <div class="tooltip-demo well"> + <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" rel='tooltip' title="first tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='tooltip' title='Another tooltip'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='tooltip' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='tooltip' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div> <hr> - <h2>Using bootstrap-twipsy.js</h2> - <p>Trigger the Twipsy tooltips via javascript:</p> - <pre class="prettyprint linenums">$('#example').twipsy(options)</pre> + <h2>Using bootstrap-tooltip.js</h2> + <p>Trigger the tooltip via javascript:</p> + <pre class="prettyprint linenums">$('#example').tooltip(options)</pre> <h3>Options</h3> <table class="bordered-table striped-table"> <thead> @@ -647,7 +684,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>selector</td> <td>string</td> <td>false</td> - <td>If a selector is provided, twipsy objects will be delegated to the specified targets.</td> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> </tr> <tr> <td>title</td> @@ -673,18 +710,18 @@ $('a[data-toggle="tab"]').on('shown', function (e) { </tr> </tbody> </table> - <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p> + <p><span class="label notice">Notice</span> Individual tooltip instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> - <p>For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> + <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p> <h3>Methods</h3> - <h4>$().twipsy(options)</h4> - <p>Attaches a twipsy handler to an element collection.</p> - <h4>.twipsy('show')</h4> - <p>Reveals an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').twipsy('show')</pre> - <h4>.twipsy('hide')</h4> - <p>Hides an elements twipsy.</p> - <pre class="prettyprint linenums">$('#element').twipsy('hide')</pre> + <h4>$().tooltip(options)</h4> + <p>Attaches a tooltip handler to an element collection.</p> + <h4>.tooltip('show')</h4> + <p>Reveals an elements tooltip.</p> + <pre class="prettyprint linenums">$('#element').tooltip('show')</pre> + <h4>.tooltip('hide')</h4> + <p>Hides an elements tooltip.</p> + <pre class="prettyprint linenums">$('#element').tooltip('hide')</pre> </div> </div> </section> @@ -701,7 +738,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <div class="span3 columns"> <h3>About popovers</h3> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p> - <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p> + <p class="muted"><strong>*</strong> Requires <a href="#tooltip">Tooltip</a> to be included</p> <a href="../js/bootstrap-popover.js" target="_blank" class="btn">Download file</a> </div> <div class="span9 columns"> @@ -741,7 +778,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <td>selector</td> <td>string</td> <td>false</td> - <td>if a selector is provided, twipsy objects will be delegated to the specified targets</td> + <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td> </tr> <tr> <td>trigger</td> @@ -776,7 +813,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) { <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p> <h3>Markup</h3> <p> - For performance reasons, the Twipsy and Popover data-apis are opt in. If you would like to use them just specify a the selector option. + For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a the selector option. </p> <h3>Methods</h3> <h4>$().popover(options)</h4> @@ -1302,7 +1339,7 @@ $('#myCollapsible').on('hidden', function () { <script src="../js/bootstrap-dropdown.js"></script> <script src="../js/bootstrap-scrollspy.js"></script> <script src="../js/bootstrap-tab.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="../js/bootstrap-popover.js"></script> <script src="../js/bootstrap-button.js"></script> <script src="../js/bootstrap-collapse.js"></script> @@ -1311,11 +1348,11 @@ $('#myCollapsible').on('hidden', function () { <script src="assets/js/application.js"></script> <script> $(function () { - // twipsy demo - $('.twipsy-demo.well').twipsy({ - selector: "a[rel=twipsy]" + // tooltip demo + $('.tooltip-demo.well').tooltip({ + selector: "a[rel=tooltip]" }) - $('.twipsy-test').twipsy() + $('.tooltip-test').tooltip() // popover demo $("a[rel=popover]") diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 5b6f7c7c37..3a0cce80a0 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -399,15 +399,15 @@ </dl> <dl class="span2"> <dt>Javascript plugins</dt> - <dd><a href="./javascript.html#transitions">Transitions</a></dd> - <dd><a href="./javascript.html#modals">Modals</a></dd> - <dd><a href="./javascript.html#dropdowns">Dropdowns</a></dd> + <dd><a href="./javascript.html#transition">Transition</a></dd> + <dd><a href="./javascript.html#modal">Modal</a></dd> + <dd><a href="./javascript.html#dropdown">Dropdown</a></dd> <dd><a href="./javascript.html#scrollspy">Scrollspy</a></dd> - <dd><a href="./javascript.html#tabs">Tabs</a></dd> - <dd><a href="./javascript.html#twipsy">Twipsy tooltips</a></dd> - <dd><a href="./javascript.html#popovers">Popovers</a></dd> - <dd><a href="./javascript.html#alerts">Alerts</a></dd> - <dd><a href="./javascript.html#buttons">Buttons</a></dd> + <dd><a href="./javascript.html#tab">Tab</a></dd> + <dd><a href="./javascript.html#tooltip">Tooltip</a></dd> + <dd><a href="./javascript.html#popover">Popover</a></dd> + <dd><a href="./javascript.html#alerts">Alert</a></dd> + <dd><a href="./javascript.html#buttons">Button</a></dd> <dd><a href="./javascript.html#collapse">Collapse</a></dd> <dd><a href="./javascript.html#carousel">Carousel</a></dd> <dd><a href="./javascript.html#typeahead">Typeahead</a></dd> @@ -433,7 +433,7 @@ <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script> <script src="../js/bootstrap-transition.js"></script> - <script src="../js/bootstrap-twipsy.js"></script> + <script src="../js/bootstrap-tooltip.js"></script> <script src="assets/js/application.js"></script> </body> diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js index 746699d372..9f60cbe957 100644 --- a/js/bootstrap-popover.js +++ b/js/bootstrap-popover.js @@ -26,10 +26,10 @@ this.init('popover', element, options) } - /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js - ========================================= */ + /* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js + ========================================== */ - Popover.prototype = $.extend({}, $.fn.twipsy.Constructor.prototype, { + Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, { constructor: Popover @@ -86,7 +86,7 @@ $.fn.popover.Constructor = Popover - $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { + $.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { placement: 'right' , content: '' , template: '<div class="popover"><div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div></div>' diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-tooltip.js index b7b802926d..241a44e248 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-tooltip.js @@ -1,8 +1,8 @@ -/* ========================================================== - * bootstrap-twipsy.js v2.0.0 - * http://twitter.github.com/bootstrap/javascript.html#twipsy +/* =========================================================== + * bootstrap-tooltip.js v2.0.0 + * http://twitter.github.com/bootstrap/javascript.html#tooltip * Inspired by the original jQuery.tipsy by Jason Frame - * ========================================================== + * =========================================================== * Copyright 2011 Twitter, Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -22,16 +22,16 @@ "use strict" - /* TWIPSY PUBLIC CLASS DEFINITION - * ============================== */ + /* TOOLTIP PUBLIC CLASS DEFINITION + * =============================== */ - var Twipsy = function ( element, options ) { - this.init('twipsy', element, options) + var Tooltip = function ( element, options ) { + this.init('tooltip', element, options) } - Twipsy.prototype = { + Tooltip.prototype = { - constructor: Twipsy + constructor: Tooltip , init: function ( type, element, options ) { var eventIn @@ -154,7 +154,7 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.twipsy-inner').html(this.getTitle()) + $tip.find('.tooltip-inner').html(this.getTitle()) $tip.removeClass('fade in top bottom left right') } @@ -242,29 +242,29 @@ } - /* TWIPSY PLUGIN DEFINITION - * ======================== */ + /* TOOLTIP PLUGIN DEFINITION + * ========================= */ - $.fn.twipsy = function ( option ) { + $.fn.tooltip = function ( option ) { return this.each(function () { var $this = $(this) - , data = $this.data('twipsy') + , data = $this.data('tooltip') , options = typeof option == 'object' && option - if (!data) $this.data('twipsy', (data = new Twipsy(this, options))) + if (!data) $this.data('tooltip', (data = new Tooltip(this, options))) if (typeof option == 'string') data[option]() }) } - $.fn.twipsy.Constructor = Twipsy + $.fn.tooltip.Constructor = Tooltip - $.fn.twipsy.defaults = { + $.fn.tooltip.defaults = { animation: true , delay: 0 , selector: false , placement: 'top' , trigger: 'hover' , title: '' - , template: '<div class="twipsy"><div class="twipsy-arrow"></div><div class="twipsy-inner"></div></div>' + , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' } }( window.jQuery )
\ No newline at end of file diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 4933f96057..180466a74b 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -156,11 +156,13 @@ break case 38: // up arrow + if (!this.shown) return e.preventDefault() this.prev() break case 40: // down arrow + if (!this.shown) return e.preventDefault() this.next() break diff --git a/js/tests/index.html b/js/tests/index.html index 27c2b34125..8c710de366 100644 --- a/js/tests/index.html +++ b/js/tests/index.html @@ -20,7 +20,7 @@ <script src="../../js/bootstrap-modal.js"></script> <script src="../../js/bootstrap-scrollspy.js"></script> <script src="../../js/bootstrap-tab.js"></script> - <script src="../../js/bootstrap-twipsy.js"></script> + <script src="../../js/bootstrap-tooltip.js"></script> <script src="../../js/bootstrap-popover.js"></script> <script src="../../js/bootstrap-typeahead.js"></script> @@ -33,7 +33,7 @@ <script src="unit/bootstrap-modal.js"></script> <script src="unit/bootstrap-scrollspy.js"></script> <script src="unit/bootstrap-tab.js"></script> - <script src="unit/bootstrap-twipsy.js"></script> + <script src="unit/bootstrap-tooltip.js"></script> <script src="unit/bootstrap-popover.js"></script> <script src="unit/bootstrap-typeahead.js"></script> diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 08512ca979..8543162c6a 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -1,62 +1,62 @@ $(function () { - module("bootstrap-twipsy") + module("bootstrap-tooltip") test("should be defined on jquery object", function () { var div = $("<div></div>") - ok(div.twipsy, 'popover method is defined') + ok(div.tooltip, 'popover method is defined') }) test("should return element", function () { var div = $("<div></div>") - ok(div.twipsy() == div, 'document.body returned') + ok(div.tooltip() == div, 'document.body returned') }) test("should expose default settings", function () { - ok(!!$.fn.twipsy.defaults, 'defaults is defined') + ok(!!$.fn.tooltip.defaults, 'defaults is defined') }) test("should remove title attribute", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy() - ok(!twipsy.attr('title'), 'title tag was removed') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() + ok(!tooltip.attr('title'), 'title tag was removed') }) test("should add data attribute for referencing original title", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>').twipsy() - equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip() + equals(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute') }) test("should place tooltips relative to placement option", function () { $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') .appendTo('#qunit-fixture') - .twipsy({placement: 'bottom'}) - .twipsy('show') + .tooltip({placement: 'bottom'}) + .tooltip('show') - ok($(".twipsy").hasClass('fade bottom in'), 'has correct classes applied') - twipsy.twipsy('hide') + ok($(".tooltip").hasClass('fade bottom in'), 'has correct classes applied') + tooltip.tooltip('hide') }) test("should always allow html entities", function () { $.support.transition = false - var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>') .appendTo('#qunit-fixture') - .twipsy('show') + .tooltip('show') - ok($('.twipsy b').length, 'b tag was inserted') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') + ok($('.tooltip b').length, 'b tag was inserted') + tooltip.tooltip('hide') + ok(!$(".tooltip").length, 'tooltip removed') }) test("should respect custom classes", function () { - var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>') + var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>') .appendTo('#qunit-fixture') - .twipsy({ template: '<div class="twipsy some-class"><div class="twipsy-arrow"/><div class="twipsy-inner"/></div>'}) - .twipsy('show') + .tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'}) + .tooltip('show') - ok($('.twipsy').hasClass('some-class'), 'custom class is present') - twipsy.twipsy('hide') - ok(!$(".twipsy").length, 'twipsy removed') + ok($('.tooltip').hasClass('some-class'), 'custom class is present') + tooltip.tooltip('hide') + ok(!$(".tooltip").length, 'tooltip removed') }) })
\ No newline at end of file diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 57ada98a98..d71002c468 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -39,7 +39,7 @@ // Components: Popovers @import "modals.less"; -@import "twipsy.less"; +@import "tooltip.less"; @import "popovers.less"; // Components: Buttons & Alerts diff --git a/lib/button-groups.less b/lib/button-groups.less index d2307018eb..e9724ba8c2 100644 --- a/lib/button-groups.less +++ b/lib/button-groups.less @@ -90,6 +90,7 @@ display: block; top: 30px; .border-radius(5px); + &.large { top: 40px; } } .btn-group.open .dropdown-toggle { background-image: none; diff --git a/lib/twipsy.less b/lib/tooltip.less index 7eaa7d5bfd..b21c6bb7a5 100644 --- a/lib/twipsy.less +++ b/lib/tooltip.less @@ -1,9 +1,9 @@ -// TWIPSY -// ------ +// TOOLTIP +// ------= -.twipsy { +.tooltip { position: absolute; - z-index: @zindexTwipsy; + z-index: @zindexTooltip; display: block; visibility: visible; padding: 5px; @@ -14,12 +14,12 @@ &.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(); } + &.top .tooltip-arrow { #popoverArrow > .top(); } + &.left .tooltip-arrow { #popoverArrow > .left(); } + &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } + &.right .tooltip-arrow { #popoverArrow > .right(); } } -.twipsy-inner { +.tooltip-inner { max-width: 200px; padding: 3px 8px; color: white; @@ -28,7 +28,7 @@ background-color: @black; .border-radius(4px); } -.twipsy-arrow { +.tooltip-arrow { position: absolute; width: 0; height: 0; diff --git a/lib/variables.less b/lib/variables.less index 97b6f9e3c8..3f32c36f4d 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -52,7 +52,7 @@ @zindexDropdown: 1000; @zindexPopover: 1010; -@zindexTwipsy: 1020; +@zindexTooltip: 1020; @zindexFixedNavbar: 1030; @zindexModalBackdrop: 1040; @zindexModal: 1050; |