Fork me on GitHub

Javascript for Bootstrap

Bring Bootstrap's components to life with new, custom plugins that work with MooTools.

← Back to Bootstrap home

Bootstrap, from Twitter is a heaping serving of awesomeness. In addition to it's easy to use grid system, layouts, good looking typography, and the fact that the whole thing is written in Less, it includes a handful of JavaScript plugins for jQuery and Ender to bring a lot of the CSS components to life. We're talking tips, popups, drop down menus and more.

Enter MooTools

For those of us who prefer MooTools, the JS included in Bootstrap isn't so useful. This library offers all the tools necessary to get the same functionality released by Twitter.

Getting the Library

Included in this repo are numerous MooTools plugins that depend on MooTools Core, MooTools More, Clientcide, MooTools Behavior, and Behaviors for MooTools More. Building all these takes some configuration on your part (check out the MooTools Packager - here's a nice blog post on it by Ryan Florence), or you can just go to dev.clientcide.com and build it with the online tools there, which is what I recommend.

This plugin adds quick, dynamic tab and pill functionality.

Markup

You can activate a tab or pill navigation without writing any javascript by simply giving them a data-behavior="BS.Tabs".

 <ul class="tabs" data-behavior="BS.Tabs" >...</ul>

Activates tab functionality for a given container.

<ul class="nav nav-tabs" data-behavior="BS.Tabs BS.Dropdown" data-bs-tabs-options="
  'smooth': true
">
  <li class="active"><a href="#home">Home</a></li>
  <li><a>Profile</a></li>
  <li><a>Messages</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle">Settings<b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a>Email address</a></li>
      <li><a>Password</a></li>
    </ul>
  </li>

</ul>
<div id="my-tab-content" class="tab-content">
  <div class="tab-pane active" id="home">
    <p>...</p>
  </div>
  <div id="profile" class="tab-pane">
    <p>...</p>
  </div>
  <div id="messages" class="tab-pane">
    <p>...</p>
  </div>
  <div id="email" class="tab-pane">
    <p>...</p>
  </div>
  <div id="password" class="tab-pane">
    <p>...</p>
  </div>

</div>

Behavior.BS.Tab Options

Name type default description
tabs-selector string ">li" A selector to find the tab elements that the user clicks.
sections-selector string "+.tab-content > div" A selector to find the sections that correlate to each tab.
smooth boolean false Fade in the content when the tabs are switched.
smoothSize boolean false Transition the height of each tab section as its displayed.
selectedClass string "active" The class added to the active tab.
hash string -- If defined, will add a hash value to the window location so that if the user reloads the selected tab will be selected by default.

Demo

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

Based on the excellent jQuery.tipsy plugin written by Jason Frame; Bootstrap.Tooltip is an updated version, which doesn't rely on images, uses css3 for animations, and is based on MooTools.

Using Behavior.Tooltip.js

<a data-behavior="BS.Tooltip" title="I'm a tooltip">a tip!</a>

Options

Name type default description
content string 'title' the content of the tip, if not defined, will use the title property of the element
animate boolean true apply a css fade transition to the tooltip
delayIn number 200 delay before showing tooltip (ms)
delayOut number 0 delay before hiding tooltip (ms)
placement string 'above' how to position the tooltip - above | below | left | right
offset number 0 pixel offset of tooltip from target element
trigger string 'hover' how tooltip is triggered - hover | focus | manual
onOverflow boolean false Only show the tip if the element's content is overflown (i.e. it's scroll-height or scroll-width is greater than the height or width of the element)

Demo

Tight pants next level keffiyeh you probably 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 have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

The popover plugin provides a simple interface for adding popovers to your application.

Using Behavior.Popover.js

<a data-behavior="BS.Popover" title="A Title" data-bs-popover-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>

Options

Name type default description
title string -- the title of the popover, if not defined, will use the title property of the element
content string -- the content of the popover
animate boolean true apply a css fade transition to the tooltip
delayIn number 200 delay before showing tooltip (ms)
delayOut number 0 delay before hiding tooltip (ms)
placement string 'right' how to position the tooltip - above | below | left | right
offset number 10 pixel offset of tooltip from target element
trigger string 'hover' how tooltip is triggered - hover | focus | manual
onOverflow boolean false Only show the tip if the element's content is overflown (i.e. it's scroll-height or scroll-width is greater than the height or width of the element)

Demo

hover for popover

Adding close functionality to alerts with MooTools' Behavior is super easy.

Closing Alerts

Closing errors uses the nix trigger from the Fx.Reveal delegator in more-behaviors. You can put this trigger on any element.

Markup

<div class="alert alert-error">
  <!-- the data trigger references the parent div.alert -->
  <a class="close" data-trigger="nix" data-nix-options="
    'target': '!div.alert'
  ">&times;</a>
  <p>Oh snap! You Got an error!</p>
</div>

Demo

×

Holy guacamole! Best check yo self, you're not looking too good.

×

Oh snap! You got an error! Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

This implementation supports only the plugins that the author has had personal need of. I hope to add support for all the interactive features available in Bootstrap at some point. Pull requests are welcome!

For accordion support, use the Behavior.Accordion plugin in More Behaviors.

There is currently no support for the Carousel functionality found in Bootstrap.

There is currently no support for the Typeahead functionality found in Bootstrap.

There is currently no support for the Scrollspy functionality found in Bootstrap.