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.

Our Modal plugin is a super slim take on the traditional modal js plugin, taking special care to include only the bare functionality that we require here at twitter.

Using Behavior.Popup and Delegator.ShowPopup

<!-- this button will show the popup below it -->
<button data-trigger="BS.showPopup" data-bs-showpopup-target="!body #demoPopup"
    class="btn danger">Launch Modal</button>

<div data-behavior="BS.Popup" class="modal fade" id="demoPopup">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Modal Heading</h3>
  </div>
  <div class="modal-body">
    <p>One fine body...</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn primary dismiss stopEvent">Primary</a>
    <a href="#" class="btn secondary dismiss stopEvent">Secondary</a>
  </div>
</div>

Behavior.BS.Popup Options

Name	type	default	description
persist	boolean	true	If false the popup and its modal layer will be destroyed when it is closed. Useful when you are fetching the popup with Ajax.
hide	boolean	false	Do not show the Popup immediately.
mask	boolean	true	Includes a modal-backdrop element.
animate	boolean	true	Slides the window into and out of view with a smooth transition.
closeOnClickOut	boolean	true	Close the popup when the user clicks out of it (on the mask or, if it's not used, the document body outside the popup).
closeOnEsc	boolean	false	Closes the modal when escape key is pressed

Notice This implementation mirrors that found in Twitter's JS library. It uses CSS transitions when available (generally speaking, every browser but IE). Add the .fade class to your element to have it transition in. You can alternately specify the animate option in the behavior filter settings listed above. If you do not specify either of these, you should add the .hide class unless you want your element visible immediately.

Notice Any element in your content with the class .close or .dismiss will close the popup. The reason for both is that Bootstrap provides styles for .close elements (the *x* in the upper right corner) that you may not want applied to your element. By default, the default behavior for the click event on these elements is NOT stopped (so if they are submit buttons or actual links with href properties, those actions will occur). Add the class stopEvent to have the class call Event.preventDefault for you.

Behavior Options

Notice Behavior options can be set inline (data-filtername-option="value") or using JSON-like values like so:

<div data-behavior="FilterName" data-filtername-options="
  'string': 'foo',
  'number': 1,
  'object': { 'array': [1,2]}
">...</div>

Selectors

Notice Selectors in Behavior filters and Delegator triggers are always relative to the element they modify. So if you want to find an element that is a child of that element, you can just use a regular selector, but if you need to find an element that is somewhere else in the DOM, use Slick's reverse combinators (!.someParent #someChildOfThatParent - e.g. !body #foo).

Demo

Launch Modal

This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.

Using Behavior.BS.Dropdown

To quickly add dropdown functionality to any nav element, use the Dropdown behavior. Any valid bootstrap dropdown inside the container will automatically be activated.

<-- a simple example -->
<ul data-behavior="BS.Dropdown">
  <li class="menu">
    <a href="#" class="menu">Menu2</a>
    <ul class="menu-dropdown">
      <li><a>item1</a></li>
      <li><a>item2</a></li>
      <li><a>item3</a></li>
    </ul>
  </li>
</ul>

<-- an example with numerous menus -->
<div class="topbar-wrapper" data-behavior="BS.Dropdown">
  <div id="topbar-example" class="topbar">
    <div class="topbar-inner">
      <div class="container">
        <h3><a href="#">Project Name</a></h3>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <form action="">
          <input type="text" placeholder="Search" />
        </form>
        <ul class="nav secondary-nav">
          <li class="menu">
            <a href="#" class="menu">Dropdown 1</a>
            <ul class="menu-dropdown">
              <li><a href="#">Secondary link</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Another link</a></li>
            </ul>
          </li>
          <li class="menu">
            <a href="#" class="menu">Dropdown 2</a>
            <ul class="menu-dropdown">
              <li><a href="#">Secondary link</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Another link</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Demo

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="Tabs".

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

Activates tab functionality for a given container.

<ul class="tabs" data-behavior="BS.Tabs">
  <li class="active"><a>Home</a></li>
  <li><a>Profile</a></li>
  <li><a>Messages</a></li>
  <li><a>Settings</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
  <div class="active" id="home">
    ...
  </div>
  <div id="profile">
    ...
  </div>
  <div id="messages">
    ...
  </div>
  <div id="settings">
    ...
  </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

• Home
• Profile
• Messages
• Settings

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

Using Behavior.Twipsy.js

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

Options

Name	type	default	description
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)
fallback	string	''	text to use when no tooltip title is present
placement	string	'above'	how to position the tooltip - above | below | left | right
offset	number	0	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual

Demo

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-popover-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>

Options

Name	type	default	description
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)
fallback	string	''	text to use when no tooltip title is present
placement	string	'right'	how to position the tooltip - above | below | left | right
offset	number	10	pixel offset of tooltip from target element
title	string, function	'title'	attribute or method for retrieving title text
content	string, function	'data-content'	attribute or method for retrieving content text
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-message error">
  <!-- the data trigger references the parent div.alert-message -->
  <a class="close" data-trigger="nix" data-nix-options="
    'target': '!div.alert-message'
  ">&times;</a>
  <p>Oh snap! You Got an error!</p>
</div>

Demo

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