About this library

This library implements support for Bootstrap components using MooTools. It does not use the same data- tags as Bootstrap's native jQuery implementation, so be sure to read this document thoroughly. Not every component is included here (most notably Carousel and Scrollspy) because the author has not found need of them and thus hasn't gotten around to it. Pull requests are accepted and encouraged!

Behavior and Data attributes

All the plugins are meant to be used with Behavior and can be invoked with data attributes. These are not the same attributes used with Bootstrap for its jQuery implementation. If someone wants to write a library that translates the same data attributes to work with this implementation go for it!

All the plugins here are also stand-alone MooTools classes, so you don't have to use Behavior and the data attributes if you don't want to. See the docs on Clientcide for how to invoke them manually.

Behavior is an extremely robust and well tested UI programming framework that provides events, plugin support and easy configuration. It is highly recommended that you read up on it and use it with this library.

Behavior Options

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

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).

Examples

See the Bootstrap docs for a static example of this (i.e. one that doesn't actually pop up). You can use Bootstrap.Popup to manually controll these or use the Behavior implementation displayed here.

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-behavior="BS.Popup" on the modal and then on a controller element, like a button, set data-trigger="BS.showPopup" with href="#foo" to target a specific modal to toggle.

<button type="button" data-trigger="BS.showPopup" href="#myModal">Launch modal</button>

Example:

<!-- sample modal content -->
<div data-behavior="BS.Popup" id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
      </div>
      <div class="modal-body">
        <h4>Text in a modal</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h4>Popover in a modal</h4>
        <p>This <a role="button" class="btn btn-default popover-test" title="A Title" data-behavior="BS.Popover" data-bs-popover-options="
            'content': 'And here\'s some amazing content. It\'s very engaging. right?',
            'trigger': 'click'
          ">button</a> should trigger a popover on click.</p>

        <h4>Tooltips in a modal</h4>
        <p><a href="#" class="tooltip-test" title="Tooltip" data-behavior="BS.Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip" data-behavior="BS.Tooltip">that link</a> should have tooltips on hover.</p>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="bs-example" style="padding-bottom: 24px;">
  <a data-trigger="BS.showPopup" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
</div><!-- /example -->

Behavior Options

These options apply only to the data- tag invocation. See the documentation on dev.clientcide.com for JavaScript options, methods, and events.

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

new Bootstrap.Popup(myElement, options).show();

<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

new Bootstrap.Dropdown(containerElement, options);

<ul class="nav nav-tabs" data-behavior="BS.Tabs">
  <li><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

new TabSwapper(container, options);

<a href="#" data-behavior="BS.Tooltip" title="first tooltip">Hover over me</a>

new Bootstrap.Tooltip(element, options).show();

<a class="btn btn-lg btn-danger" data-behavior="BS.Popover" title="A Title" data-bs-popover-options="
  'content': 'And here\'s some amazing content. It\'s very engaging. right?',
  'location': 'below'
">Mouseover to toggle popover</a>

new Bootstrap.Popover(element, options).show();

<div class="alert alert-warning fade in">
  <button type="button" class="close" data-trigger="nix" data-nix-target="!.alert">×</button>
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>

<button type="button" class="btn btn-primary" data-trigger="toggleClass" data-toggleclass-class="active">Single toggle</button>

<label class="btn btn-primary">
  <input type="checkbox" data-trigger="toggleClass" data-toggleclass-options="
    'class': 'active',
    'target': '!label'
  "> Option 1
</label>

<div class="bs-example" style="padding-bottom: 24px;">
  <div class="btn-group" data-toggle="buttons"  data-trigger="removeClass" data-removeclass-options="
    'class': 'active',
    'targets': 'label'
  ">
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option1" data-trigger="toggleClass" data-toggleclass-options="
        'class': 'active',
        'target': '!label'
      "> Option 1
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option2" data-trigger="toggleClass" data-toggleclass-options="
        'class': 'active',
        'target': '!label'
      "> Option 2
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="option3" data-trigger="toggleClass" data-toggleclass-options="
        'class': 'active',
        'target': '!label'
      "> Option 3
    </label>
  </div>
</div>

<div class="panel-group" id="accordion" data-behavior="Accordion" data-accordion-options="
  'headers': 'a.accordion-toggle',
  'sections': '.panel-collapse'
">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

<div data-behavior="BS.Affix" data-offset-top="200">...</div>

new Bootstrap.Affix(element, { top: 0 });

{
  top: "affix-top",
  bottom: "affix-bottom",
  affixed: "affix"
}