Options

Bootstrap 4 will remove the remote option and we already replaced it with a better option. We also skipped the show option because via JavaScript we quickly and easily access the component's public methods right after initialiation, we'll have a look in a minute.

The default options' values are same as their jQuery plugin equivalents so you can expect same behavior.

Methods

For further control the Modal component exposes a couple of public methods to be used via JavaScript :

Events

The loaded.bs.modal original event is not needed, also because we replaced the remote option with another one. If modal is opened via JavaScript methods, or by clicking on another element that is not a modal triggering element, the relatedTarget is null.

Usage

Via DATA API

You can initialize Modal without writing any code as long as you have a modal and a trigger with data-target or a link with href referencing that modal. The component will initialize for all elements with data-toggle="modal" found in the DOM.

<!-- provide a trigger button -->
<button id="myModalTrigger" type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!-- Alternatively provide a link -->
<a id="myModalTrigger" data-toggle="modal" href="#myModal">Launch modal</a>

<!-- also the modal itself -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Some content
      </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>
  </div>
</div>

The DATA API is suited for static content dialogs.

Via JavaScript

When you write your code, first make sure a modal template is present in the DOM and one or more triggering buttons that reference that modal. Via JavaScript initialization the data-toggle="modal" is not required, so you can grab a triggering element and initiate Modal, then immediately get access to methods. The JavaScript way is the only way to deal with dynamically added modals.

The original plugin will initialize for the modal element, but we initialize for the triggering element, and this has it's own advantages and we'll disect that in a second. Let's create a very basic modal template for the record.

<!-- blank modal template -->
<div id="modalID" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- the .setContent() method will update this element's HTML -->
    </div>
  </div>
</div>

Now let's initialize a triggering button element that targets the above modal via data-target="#myModal" or href="#myModal".

// get a certain button trigger
var myModalTriggerButton = document.getElementById('myModalTrigger');

// initiate Modal with all options
// Note: options object is optional
var myModalInstance = new Modal(myModalTriggerButton, 
{ // options object
  content: '<div class="modal-body">Some content to be set on init</div>', // sets modal content
  backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target
  keyboard: false, // we don't want to dismiss Modal on pressing Esc key
  duration: 700, // let's assume we changed the animation duration for Modal
});

// OR initialize and show the modal right away
var myModalInstance = new Modal(myModalTriggerButton, options).show();
// now you know why we don't need a show option

Now we have an initialization reference in myModalInstance, we can start applying the public methods.

// show the modal at any time
myModalInstance.show();

// hide the modal
myModalInstance.hide();

// toggle the modal (show/hide)
myModalInstance.toggle();

// change the modal content
myModalInstance.setContent('<div class="modal-body">Some different content</div>');

// if the above method is used while modal was shown, you can then ask for a layout update
myModalInstance.update();

After initialization via DATA API or JavaScript, we also have access to the component's original events.

// GET THE EVENT TARGET, THE MODAL
// when we are certain which modal ID to work with
var myModal = document.getElementById('myModal');

// also button trigger related (especially when modals are triggered by multiple instances) 
// the triggering element is a link
var myModal = document.getElementById(myModalTriggerButton.getAttribute('href').replace('#','')); 
// OR triggering element is not a link
var myModal = document.getElementById(myModalTriggerButton.getAttribute('data-target').replace('#','')); 

// ATTACH HANDLERS
// show.bs.modal event
myModal.addEventListener('show.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
  // event.relatedTarget is the button referenced with myModalTriggerButton
}, false);

// shown.bs.modal event
myModal.addEventListener('shown.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
  // event.relatedTarget is the button referenced with myModalTriggerButton
}, false);

// hide.bs.modal event
myModal.addEventListener('hide.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
}, false);

// hidden.bs.modal event
myModal.addEventListener('hidden.bs.modal', function(event){
  // do something when this event triggers
  // event.target is the modal referenced in myModal
}, false);

Additionally the component will store in the modal and it's triggering elements some references, for the internal execution, hopefully would help you as well:

// modal knows which element was clicked to execute the .show() method
var lastModalTrigger = myModal.modalTrigger; 
// for modals with multiple triggering elements, the value changes every time the triggering element was clicked

Also each triggering element holds the initialization of the Modal component:

// assuming we a modal was initialized via DATA API
var myModalInstance === document.getElementById('myModalTrigger').Modal; 

These references are used internally to hide currently visible modals when showing another one, and this is the reason why we initialize on the triggering element and not the modal, as a modal cannot hold multiple initialization instances for each triggering element.

Examples

Using the DATA API

The first example is a modal with static content initialized via DATA API, exactly as described in the above Use via DATA API section, and showcasing the ability to show another modal from a modal currently visible.

Launch simple modal

Via JavaScript

The following examples are focused on everything the Modal component offers for JavaScript initialization and usage. Given a modal template and some triggering elements that target the modal, let's initialize them one by one:

// we grab the trigger button by ID
var btnModal = document.getElementById('modalTriggerJS');

// set a custom content
var firstModalContent = '<div class="modal-header">'
    +'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
      +'<span aria-hidden="true">×</span>'
    +'</button>'
    +'<h4 class="modal-title" id="myModalJSLabel">Modal title</h4>'
  +'</div>'
  +'<div class="modal-body">'
    +'<p>This is where you fill up content you know, etc.</p>'
  +'</div>'
  +'<div class="modal-footer">'
    +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
  +'</div>';

// initialize Modal for this triggering element
var modalInitJS = new Modal(btnModal, {
  content: firstModalContent,
  backdrop: 'static'
});

// OR initialize with no options provided
// the options obect is optional
var modalInitJS = new Modal(btnModal);

Here is what the above code does:

Open Modal

Next we will initialize another triggering button, and attach a handler to it to change content of the modal when clicked.

// the reiggering element
var btnModal2 = document.getElementById('modalTriggerJS2');

// set some custom content or get if from external sources
var externalModalContent = {
  title: 'A modal title',
  content: 'Modal content to fill the modal-body.',
};

// set a custom modal-content template
var secondModalContent = 
  '<div class="modal-header">'
    +'<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
      +'<span aria-hidden="true">×</span>'
    +'</button>'
    +'<h4 class="modal-title" id="gridModalLabel">' + externalModalContent.title + '</h4>'
  +'</div>'
  +'<div class="modal-body">'
    +'<p>' + externalModalContent.content + '</p>'
  +'</div>'
  +'<div class="modal-footer">'
    +'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
  +'</div>';

// initialize Modal for this triggering element
var modalInitJS2 = new Modal(btnModal2, { backdrop: 'static' });

// now when we click this modal triggering element, we change the modal content
btnModal2.addEventListener('click', function() {
  modalInitJS2.setContent(secondModalContent);
}, false);  

By changing the innerHTML of the modal-header, modal-body or modal-footer with variables, you can achieve exactly the same as the other examples from the demo of the original plugin. So we use same modal, but with different content:

Open Modal

Now if you go back to the previous triggering button and click it, you will notice that the modal is still like it was set by the second triggering button. Let's reset the modal content:

// we grab the button by ID
var btnModalNotTrigger = document.getElementById('modalNotTriggerJS');

// simply attach a click handler to it
btnModalNotTrigger.addEventListener('click', function() {
  modalInitJS.setContent(firstModalContent);  // revert modal content back to previous
  modalInitJS.show(); // also show the modal
}, false);

Back to the previous modal content:

Reset

Another example is using the .update() method. Let's say we have a modal initialized via DATA API, you might think we cannot access this instance's methods. Remember the trigger button stores the initialization?

var modalUpdate = document.getElementById('modalUpdate'), // the trigger
  anotherStaticModal = document.getElementById('anotherStaticModal'), // the modal
  currentStaticModalBody = anotherStaticModal.querySelector('.modal-body'), // the body of the current modal
  currentStaticModalBodyContent = currentStaticModalBody.innerHTML, // we cache the content of the body
  modalUpdateInit = modalUpdate.Modal, // the initialization
  changeModal1 = document.getElementById('changeModal1'), // the change buttons
  changeModal2 = document.getElementById('changeModal2');

changeModal1.addEventListener('click', function(){
  currentStaticModalBody.innerHTML = currentStaticModalBodyContent;
  modalUpdateInit.update();
}, false);

changeModal2.addEventListener('click', function(){
  currentStaticModalBody.innerHTML  = '<h4>This modal changed via JavaScript</h4>';
  currentStaticModalBody.innerHTML += '<p>Something you would want to be displayed in the body.</p>';
  modalUpdateInit.update();
}, false);

A quick demo to showcase the above script:

Show modal

Options

Methods

Events

Just like the original jQuery plugin, the Dropdown component covers this part as well:

The target of all component events is the parent <div class="dropdown">, while the event.relatedTarget is the triggering element with the specific data-toggle="dropdown" attribute. If you dismiss the dropdown via JavaScript, the Esc key or by clicking outside the triggering button, the event.relatedTarget is null.

Usage

Via DATA API

Notice we use same markup as the original example, the triggering element with the data-toggle="dropdown" attribute will initialize the Dropdown component.

<!-- basic dropdown template -->
<div class="dropdown">
  <button id="myDropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="myDropdown">
    ...
  </ul>
</div>

Via JavaScript

When you want full control or you need a way to handle dynamically generated dropdown-menus, you can do it via JavaScript. Considering the above HTML was inserted into the DOM, let's initialize it real quick:

// get some element that has the data-toggle="dropdown"
var myDropdown = document.getElementById('myDropdown');

// initialize component with it's option
var myDropdownInit = new Dropdown( myDropdown, { persist: true } );

// OR initialize component with no option
// the options object is optional
var myDropdownInit = new Dropdown( myDropdown );

All right, now we have an initialization reference, we can get to work with the component's method:

// assuming the above, we can
myDropdownInit.toggle();

// or we can simply toggle the dropdown on initialization
var newDropdownInitialization = new Dropdown(myDropdown).toggle();

Also assuming the above HTML was used for your dropdown-menu, we can also attach the original events to the parent of the triggering element, which is the <div class="dropdown"> element:

// show.bs.dropdown
myDropdown.parentNode.addEventListener('show.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
  // event.relatedTarget is the triggering element
}, false);

// shown.bs.dropdown
myDropdown.parentNode.addEventListener('shown.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
  // event.relatedTarget is the triggering element
}, false);

// hide.bs.dropdown
myDropdown.parentNode.addEventListener('hide.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
}, false);

// hidden.bs.dropdown
myDropdown.parentNode.addEventListener('hide.bs.dropdown', function(event){
  // do something when the event fires
  // event.target is the PARENT of the triggering element
}, false);

When your dropdown-menus have a different structure and the myDropdown.parentNode is NOT the <div class="dropdown"> element, you might consider a getClosest() function to find it so you can then attach the original events to it.

Now, the Dropdown component also stores the initialization object in the targeted elements, just as for the modal triggering buttons:

// get some element we know it was initialized
var myDropdown = document.getElementById('myDropdown');

// reference the initialization
var myDropdownInit = myDropdown.Dropdown;

// use the public method
myDropdownInit.toggle();

Also you can do a simple check for the existence of 'Dropdown' in myDropdown element to make sure you don't go the wrong way.

Examples

Right out of the box, the above dropdown template is initialized via DATA-API right away.

Ok now let's insert a new dropdown-menu and initialize right after via JavaScript.

// let's do it via a click handler to the following element
var makeMeDropdown = document.getElementById('makeMeDropdown');

// let's say we have a dropdown template as the above
// you may also reference one that you created yourself
var myDropdownTemplate = '<div class="dropdown">a valid template</div>';

makeMeDropdown.addEventListener('click', function(e){
  e.preventDefault();

  // don't do this again
  if ( !/\bdisabled/.test(makeMeDropdown.className) ){

    // invalidate the makeMeDropdown
    this.setAttribute('disabled',true);
    this.className = 'btn btn-default disabled';
    this.innerHTML = 'All done';

    // we inject the dropdown
    this.parentNode.innerHTML += myDropdownTemplate;
    // or use appendChild when myDropdownTemplate is an Element instance
    // this.parentNode.appendChild( myDropdownTemplate );

    // get a reference to the new dropdown
    var formDropdown = document.getElementById('formDropdown');

    // initiate with option
    var DropdownInit = new Dropdown(formDropdown, {persist: true});

    // also attach Dropdown original events
    formDropdown.parentNode.addEventListener('show.bs.dropdown', function(e){ 
      console.log('Do something when the event fires'); 
    }, false);
    formDropdown.parentNode.addEventListener('shown.bs.dropdown', function(e){ 
      console.log('Do something when the event fires'); 
    }, false);
    formDropdown.parentNode.addEventListener('hide.bs.dropdown', function(e){ 
      console.log('Do something when the event fires'); 
    }, false);
    formDropdown.parentNode.addEventListener('hidden.bs.dropdown', function(e){ 
      console.log('Do something when the event fires'); 
    }, false);
  }
}, false);

That's all there is to do with Dropdown initialization, let's check a quick demo.

A quick last example is with nested dropdown-menus, as the component will look for the child elements and will prevent itself from closing if the click target is a child item with data-toggle attribute.

• Pill
  • Action
  • Another action
  • This is nesting
    • Action
    • Another action
    • Something else here
    • Sub-menu
      • Level 1
      • Nested Menu
      • Other stuff
        • Level 2
        • Nested Menu
        • Even more stuff
          • Level 3
          • Nested Menu
  • External link
• Nested
  • Action
  • Another action
  • Something else here
  • Sub-menu
    • Level 1
    • Nested Menu
    • Other stuff
      • Level 2
      • Nested Menu
      • Even more stuff
        • Level 3
        • Nested Menu

Options

Unlike the original jQuery plugin, this component requires no option for offset, the default value works just fine.

We will talk later about why we don't need an offset option.

Methods

Events

The event target is the element we initialized the component via JavaScript or the data-spy="scroll" attribute. The newly activated menu item's link is the event.relatedTarget for the event.

Usage

Via DATA API

To initialize ScrollSpy, remember the requirements from the original jQuery plugin. For a quick reference we need some special HTML markup in order to initialize and the appropriate styling for the element and it's containers.

<!-- the element we initialize ScrollSpy on -->
<div data-spy="scroll" data-target="#navbar-example" class="scrollspy-example">

  <section id="one"> <!-- this is a ScrollSpy container -->
    Valid HTML goes here
  </section>

  <section id="two">
    <section id="twoone">
      One level nested containers also apply
    </section>

    <section id="twotwo">
      This is your second nested container
    </section>
  </section>

</div>

<!-- we need a target, any of the below elements with an ID will do -->
<nav id="nav-example"> <!-- we can also target it's parent as well -->
  <ul id="navbar-example" class="nav nav-stacked"> <!-- this is our element's target -->
    <li><a href="#one">One</a></li>
    <li>
      <a href="#two">Two</a>
      <ul class="nav nav-stacked">
        <li><a href="#twoone">Two One</a></li>
        <li><a href="#twotwo">Two Two</a></li>
      </ul>
    </li>
  </ul>
</nav>

We mentioned that we don't need the offset option and the reason is that we can set some additional styling to force ScrollSpy containers to have the exact height as the sum of all child elements and / or child containers.

/* the element we initialize ScrollSpy on */
.scrollspy-example {
  position: relative; /* required */
  height: 150px; overflow: auto; /* required by case: height must be px based, and overflow: scroll/auto */
  /* other styling */
}
/* element child containers */
section { 
  position: relative; /* required */
  display: inline-block; width: 100%; /* not required, but recommended */
}

For instances of ScrollSpy when the designated element is not overflowing and the scroll target is the window (like the example with the side navigation of this page), the container nesting is, as you probably noticed, unlimited.

Via JavaScript

For full control and access to the component's features, coding the JavaScript part is a breeze. Assuming the above markup have been injected into the DOM and the CSS is set, let's initialize, apply the public method and attach handlers to the original event.

// the element we initialize ScrollSpy on
var myScrollSpyElement = document.getElementsByClassName('scrollspy-example')[0];

// let's give the initialization a JavaScript reference for the "target" option
var myScrollSpyTarget = document.getElementById('myScrollSpyTarget');

// initialize the ScrollSpy for this element
var myScrollSpyInit = new ScrollSpy(myScrollSpyElement, {
  // set option
  target = myScrollSpyTarget;
  // alternativelly, provide a valid selector string
  // EG: ".my-unique-class-name" or "#my-unique-ID"
})

If the initialization validates (the target option is valid and the component links the element with it's target), we have access to the method and the original event.

// apply the public method after DOM changed
// a new element container and it's corresponding menu item have been injected into the DOM
myScrollSpyInit.refresh();

// attach an event handler
myScrollSpyElement.addEventListener('activate.bs.scrollspy', function(event){
  // do some cool stuff
  // event.target is myScrollSpyElement
  // event.relatedTarget is the menu item link that triggered the event
}, false);

To get access to an initialization object regardless of how it was initialized, here's how to do it:

// grab an element we know it was initialized via DATA API
var myScrollSpy = document.getElementById('myScrollSpy');

// check if the element is already initialized
var myScrollSpyIsInitialized = 'ScrollSpy' in myScrollSpy;

// if the above is true
var myScrollSpyInit = myScrollSpy.ScrollSpy;

// play with the public method
myScrollSpyInit.refresh();

Now this makes alot more sense, especially when you expect full control and also want to make sure you don't attach event handlers multiple times for your elements.

Examples

According to the above Usage Guide let's initialize something similar via DATA API:

For this example the element itself is the target of the scroll event, and above it the .nav component as it's target, while for the other example in this page, the side navigation on the right side, the window is the target of the scroll event.

Options

When you set the second option to true, the duration option is much more important as it will prevent any kind of animation inconsistency. This functionality assumes you are using the styling of the Collapse component, which means that the duration must be set according to the transition-duration style rule of the Collapse component.

Both the above options have no effect on legacy browsers with no support for CSS3 transitions.

Methods

Events

The component events will fire in the exact order shown in table below:

Usage

Via DATA API

Here is a sample markup to showcase the usage of the component with the above mentioned methods. As you can see, each of the elements with the data-toggle="tab" attribute are subject to the Tab component initialization.

<!-- for better usage, wrap the tabs and contents -->
<div id="myTabsWrapper">

  <!-- Nav tabs -->
  <ul id="myTabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#home" data-toggle="tab" data-height="true" data-duration="300" aria-controls="home" role="tab">Home</a>
    </li>
    <li role="presentation">
      <a href="#profile" data-toggle="tab" data-height="true" data-duration="300" aria-controls="profile" role="tab">Profile</a>
    </li>
    <li role="presentation">
      <a href="#messages" data-toggle="tab" data-height="true" data-duration="300" aria-controls="messages" role="tab">Messages</a>
    </li>
    <li role="presentation">
      <a href="#settings" data-toggle="tab" data-height="true" data-duration="300" aria-controls="settings" role="tab">Settings</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Also don't forget that this functionality works on CSS3 enabled browsers with the Collapse styling in place.

Via JavaScript

Since the component will target a single element with / or without data-toggle="tab" attribute, but at least it references a corresponding tab via href or data-target, we will need to do a simple loop to initialize multiple elements. Assuming the above markup have been injected into the DOM, let's initialize, use the public method and attach handlers to the original events.

// first, we reference the .nav component that holds all tabs
var myTabs = document.getElementById('myTabs');

// let's give the initialization a JavaScript reference for the "target" option
var myTabsCollection = myTabs.getElementsByTagName('A');

// initialize the component for all items in the collection
for (var i = 0; i < myTabsCollection.length; i++) {
  new Tab(myTabsCollection[i], // our target
  { // our options
    duration: 300,
    height: true
  });
}

If each item in the collection meets the expected markup and the tab it referencing is found, the initialization will then validate and give you immediate access to method.

// get last item from collection and reference it's initialization
var myLastTab = myTabsCollection[myTabsCollection.length-1];
var myLastTabInit = myLastTab.Tab;

// assuming the last tab is not active, we can show it
myLastTabInit.show();

// attach an event handler as well
myLastTab.addEventListener('show.bs.tab', function(event){
  // do some cool stuff
  // event.target is myLastTab
  // event.relatedTarget is the previous active tab 
}, false);

We could have also built an Object / Array with the initialization objects, but that depends very much on your needs.

Example

OK now we're ready to put this component to the test. We'll use all Bootstrap .nav components in the pool.

Options

The component covers most important options, excluding some of the options featured in the original jQuery plugin such as a template system needed template option, a selector option for auto-initialization, or a trigger option. The component works different but has it's own advantages.

Methods

For full control the Tooltip component exposes a couple of public methods to be used via JavaScript:

As you can see we don't use a .destroy() method, the reason for that is explained above, so let's explain how this has it's own advantages: if you change the data-original-title="Your new title" attribute value, next time you mouseover the element, our component will use the new value without having to reinitialize the element. Sweet!

Events

The component's original events are same as with the original jQuery Plugin, except inserted.bs.tooltip, the way the component works makes that this event is not needed, as it would fire on every instance of the .show() method.

Usage

Via DATA API

As mentioned before the component will initialize any element found to have the data-toggle="tooltip" attribute and a title attribute.

<!-- any regular link with data-toggle="tooltip" -->
<a href="https://google.com" title="Google" data-toggle="tooltip" data-duration="300">Google</a>

<!-- any SVG shape with data-toggle="tooltip" -->
<svg viewBox="0 0 80 34" width="80" height="34" xmlns="http://www.w3.org/2000/svg">
  <rect data-toggle="tooltip" data-placement="top" data-delay="150" title="Demo Title for SVG" rx="5"></rect>
</svg>

Via JavaScript

When you insert new items in the page and want them to initialize the component or you want to have full control over your tooltips, the JavaScript way is the best one. You can also initialize for elements not having the specific DATA API, but at least have a title="Not null title" attribute. You can do the following:

// find all elements with title attribute
var elementsTooltip = document.querySelectorAll('[title]');

// attach a tooltip for each
for (var i = 0; i < elementsTooltip.length; i++){
  new Tooltip(elementsTooltip[i], {
    placement: 'top', //string
    animation: 'slideNfade', // CSS class
    duration: 200, // integer
    delay: 150, // integer
  })
}

In addition, similar to any other component of this library, you can access the initialization and the public methods even for elements initialized via DATA API.

// find an element initialized with Tooltip
var myLinkWithTooltip = document.getElementById('myLinkWithTooltip');

// reference the initialization object
var myTooltipInit = myLinkWithTooltip.Tooltip;

Considering the just above element, let's go ahead and put the component's events to use:

// show.bs.tooltip
myLinkWithTooltip.addEventListener('show.bs.tooltip', function(event){
  // do some cool stuff when .show() method is called
  // event.target is myLinkWithTooltip
}, false);

// shown.bs.tooltip
myLinkWithTooltip.addEventListener('shown.bs.tooltip', function(event){
  // do some cool stuff when .show() method completed
  // event.target is myLinkWithTooltip
}, false);

// hide.bs.tooltip
myLinkWithTooltip.addEventListener('hide.bs.tooltip', function(event){
  // do some cool stuff when .hide() method is called
  // event.target is myLinkWithTooltip
}, false);

// hidden.bs.tooltip
myLinkWithTooltip.addEventListener('hidden.bs.tooltip', function(event){
  // do some cool stuff when .hide() method completed
  // event.target is myLinkWithTooltip
}, false);

Examples

Now let's test all the other placement positions, we start with inline links having the bottom placement, then left, and right. Let's put it to the test! Some heavy testing on the automatic repositioning with very very long tooltips.

Left Top With Events Bottom Right Left Top Bottom Right

Options

The component covers all needed options, including those for a template system:

If a proper template is not specified via JavaScript or the content option is not set in any way, the Popover will not be initialized.

Methods

For full control the Popover component exposes a couple of public methods to be used via JavaScript:

Also like the Tooltip component, there's no need for a .destroy() method, for the same reason for that is explained before.

Events

The component's original events are same as with the original jQuery Plugin, except inserted.bs.popover, just as explained for the Tooltip component.

Usage

Via DATA API

So out component will initialize any element found to have the data-toggle="popover" attribute and a data-content attribute.

<!-- any regular link with data-toggle="popover" -->
<a href="https://google.com" data-title="Google" data-content="Google is cool" data-toggle="popover">Google</a>

<!-- any SVG shape with data-toggle="popover" -->
<svg viewBox="0 0 80 34" width="80" height="34" xmlns="http://www.w3.org/2000/svg">
  <rect data-toggle="popover" data-placement="top" data-delay="150" data-content="Demo Title for SVG" rx="5"></rect>
</svg>

Via JavaScript

After inserting new content into the page, you can initialize any element with Popover via JavaScript. You can also initialize for elements not having the specific DATA API. You can do the following:

// find all elements with data-content attribute
var elementsPopover = document.querySelectorAll('[data-content]'); // also a certain class would go fine

// attach a popover for each
for (var i = 0; i < elementsPopover.length; i++){
  new Popover(elementsPopover[i], {
    placement: 'top', //string
    animation: 'slideNfade', // CSS class
    duration: 300, // integer
    delay: 100, // integer
    dismissible: true, // boolean
  })
}

In addition, similar to any other component of this library, you can access the initialization and the public methods even for elements initialized via DATA API.

// find an element initialized with Popover
var myLinkWithPopover = document.getElementById('myLinkWithPopover');

// reference the initialization object
var myPopoverInit = myLinkWithPopover.Popover;

Considering the just above element, let's go ahead and put the component's events to use:

// show.bs.popover
myLinkWithPopover.addEventListener('show.bs.popover', function(event){
  // do some cool stuff when .show() method is called
  // event.target is myLinkWithPopover
}, false);

// shown.bs.popover
myLinkWithPopover.addEventListener('shown.bs.popover', function(event){
  // do some cool stuff when .show() method completed
  // event.target is myLinkWithPopover
}, false);

// hide.bs.popover
myLinkWithPopover.addEventListener('hide.bs.popover', function(event){
  // do some cool stuff when .hide() method is called
  // event.target is myLinkWithPopover
}, false);

// hidden.bs.popover
myLinkWithPopover.addEventListener('hidden.bs.popover', function(event){
  // do some cool stuff when .hide() method completed
  // event.target is myLinkWithPopover
}, false);

To use the template system, you can do the following:

//define some variables or get their values from other scripts
var someTitleFromOtherCode = 'Sample title';
var someContentFromOuterSpace = '<p>Some sample message.</p>';

//initiate Popover with the template
var popover2 = new Popover('.popover-via-template', { // where .popover-via-template is the text input
  trigger: 'focus',
  template: '<div class="popover" role="tooltip">'
  + '<div class="arrow"></div>'
  + '<h3 class="popover-title">'+someTitleFromOtherCode+'</h3>'
  + '<div class="popover-content">'+someContentFromOuterSpace+'</div>'
  + '</div>'
});

Examples

First let's test all the placement positions, we start with inline links having the bottom placement, then left, and right.

Now we are going to test buttons with a popover with large contents. The last two examples below are using the template system and different trigger options. The popover generated for the last two examples can be dismissed on window resize or blur (focus out).

Left Top with Events Bottom Right Dismissible Click to open

Options

This component has no options, it uses a 150ms internal duration to emulate transitionend.

Methods

The Alert component exposes a single public method to be used via JavaScript:

Events

The component's original events are same as with the original jQuery Plugin.

Usage

Via DATA API

The component will initialize all elements with proper DATA API found in the DOM. Note that the data-dismiss="alert" attribute is required for the triggering button.

<!-- notice the <button> with the data-dismiss="alert" attribute -->
<div id="myWarningAlert" class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  Some critical notice. 
</div>

Via JavaScript

After inserting a new alert into the page, you can initialize it via JavaScript. Considering the above markup, you can do the following:

// find all elements with data-content attribute
var myWarningAlert = document.getElementById('myWarningAlert');

// initialize
var myWarningAlertInit = new Alert(myWarningAlert);

Also attach handlers to the original events:

// close.bs.alert
myWarningAlert.addEventListener('close.bs.alert', function(event){
  // do something cool
  // event.target is <div class="alert">
}, false);

// closed.bs.alert
myWarningAlert.addEventListener('closed.bs.alert', function(event){
  // do something cool
  // event.target is <div class="alert">
}, false);

Like all components of the library you can access the initialization object even if it was done via the DATA API:

// find an element initialized via DATA API
var myAlertButton = document.getElementById('myAlertButton');

// reference the initialization object
var myAlertInit = myAlertButton.Alert;

// apply the public method
myAlertInit.close();

Examples

This alert has some handlers attached to close.bs.alert and closed.bs.alert events, so check your console.

This alert uses the closed.bs.alert event to show another alert.

Options

Methods

The Button component exposes no public methods.

Events

Unlike the original jQuery Plugin, the Button component comes with an original event, consistent in all supported browsers.

Usage

Stateful Switching

The component will help you call for text switching on button elements with proper DATA API, but you have to manually call via JavaScript. This feature doesn't require the data-toggle="button" attribute, only one or more data-OPTION-text="Your text" attribute(s), so let's consider a button for instance:

<!-- a basic markup for the button -->
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>

Now this button markup is using the specific DATA API but it won't do anything by itself unless you call it via JavaScript. There always has to be an action to call the change of the button's state such as event handlers:

// grab the above .btn element
var btn = document.getElementById('myButton');

// let's say we call the switch on click
btn.addEventListener('click', function() {
  Button(btn,'loading'); 
});
// this assumes Button is using "loading" as an option from the data-loading-text="Loading..." attribute

When the button is clicked, it will change its text and because loading is a special option, the component will add a disabled CSS class to the button and a new data-original-text="Loading State" attribute.

To reset the button to it's original state, we have to do the same thing but use a different option, so let's say we need to hook into an instance of XMLHttpRequest, here's what you do:

// create a new instance of XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.google.com');

// bind into the context of the readyStateChange event
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4)  {
    // do something specific when complete
    // here we call the Button state change
    Button(btn,'reset');
  }
};
xhr.send();

When the reset option is used, the component will look for the data-original-text attribute and use its value for the button's text. In addition, if the button was made disabled via the loading option, it will remove the disabled="disabled" attribute and the disabled CSS class, to fully restore the element to it's original state.

After the use of the loading option, we could have used data-original-text and Button(btn,'original'); but it woulnd't have the same effect as the reset option. It would simply update the text but not the other option's disabled CSS class and attribute.

Radios / Checkboxes Toggling

This function applies to radio buttons and checkboxes that use the special .btn-group Bootstrap component's markup:

 <!-- the btn-group component -->
<div id="myCheckboxesButtonGroup" class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked) <!-- OR type="radio" -->
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 2 <!-- OR type="radio" -->
  </label>
  <label class="btn btn-default">
    <input type="checkbox" autocomplete="off"> Checkbox 3 <!-- OR type="radio" -->
  </label>
</div>

If the above markup is present in the DOM when the library is loaded, it will initialize via DATA API, if inserted later into the DOM, here's how to initialize it:

// find the element to apply Button to
var myCheckboxesButtonGroup = document.getElementById('myCheckboxesButtonGroup');

// initialize
var myCheckboxesButtonGroupINIT = new Button(myCheckboxesButtonGroup);

If the component finds the markup to meet all requirements, it will initialize it and the myCheckboxesButtonGroup element will store the initialization, just like the other components of the library:

// reference the initialization, even for DATA API initialized btn-group elements
var myCheckboxesButtonGroupInit = myCheckboxesButtonGroup.Button;

The only thing left to do is to attach handlers to the original events:

//let's do some custom binding action
myCheckboxesButtonGroup.addEventListener('change.bs.button', function(event) {
  // do something when anything inside the btn-group changes
  // event.target is myCheckboxesButtonGroup
});
myCheckboxesButtonGroup.getElementsByTagName('INPUT')[0].addEventListener('change.bs.button',function(event) {
  // do something only when THE FIRST input changes
  // event.target is the first <input type="checkbox"> found in myCheckboxesButtonGroup
});

Since the native change event isn't consistent in legacy browsers, with the help of polyfills and the original change.bs.button event you can easily bind other functions into the context of a .btn-group and / or it's child inputs.

Examples

Stateful Switching

Here is a quick example of button state switch just like the original plugin example, we use the loading state for the button. For the purpose of testing here, the button will come back to original state after a short setTimeout delay and the usage of reset option.

Loading state

Radios / Checkboxes Toggling

You should open your console to test the handler functions bound by the change.bs.button event of the following checkboxes and radio buttons. You should notice that the event isn't triggered twice and it works properly with IE8+.

First we'll toggle some checkboxes.

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

Finally we toggle radio buttons.

Radio 1 Radio 2 (preselected) Radio 3

Options

The options below allow you to connect a collapse to a parent accordion and a handy option to sync with the animation duration.

Methods

Calling any of the public methods while animation is running, will produce no effect.

Events

All the component's events are attached to the collapsible element and not its targeting button / element, with other words, the event.target is the element with the class="collapse" attribute.

Usage

Via DATA API

In the following markup, the component will initialize on the two .btn.btn-primary elements with the data-toggle="collapse", both targeting the same collapsible element with specific atttributes.

<!-- toggle collapse via link with HREF reference -->
<a id="collapseLink" class="btn btn-primary" role="button" aria-expanded="false" aria-controls="collapseExample"
  data-toggle="collapse" href="#collapseExample"> <!-- required DATA API -->
  Link with href
</a>

<!-- AND / OR toggle collapse via button with data-target attribute reference -->
<button id="collapseButton" class="btn btn-primary" type="button" aria-expanded="false" aria-controls="collapseExample"
  data-toggle="collapse" data-target="#collapseExample"> <!-- required DATA API -->
  Button with data-target
</button>

<!-- and the basic collapsible template -->
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Now if we stack multiple collapsible elements and wrap them into one parent with an ID attribute and some helper CSS classes, we can easily create an accordion.

<!-- accordion template -->
<div class="panel-group" id="myAccordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Collapse CONTENT 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapse CONTENT 2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#myAccordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Collapse CONTENT 3
      </div>
    </div>
  </div>
</div>

Via JavaScript

If the above single collapse template have been inserted into the DOM, you need to initialize it via JavaScript.

// grab the accordion by its ID
var collapseLink = document.getElementById('collapseLink');

// initialize the component for this collapse trigger
var myCollapseInit = new Collapse(collapseLink, {
  duration: 350 // integer
})

This now enables you to work with the public methods.

// call the show() right away
myCollapseInit.show();

// call the hide() later
// myCollapseInit.hide();

// OR call toggle() some other time 
// myCollapseInit.toggle();

Also we can attach some handlers to the original events:

// first, we need to reference the collapsible element
var myCollapseExample = document.getElementById(collapseLink.getAttribute('href').replace('#',''));

// attach a handler to the `show.bs.collapse` original event
myCollapseExample.addEventListener('show.bs.collapse', function(event){
  // do something cool when .show() method is called
  // event.target is myCollapseExample
}, false);

Alright, now let's say the above accordion template have been inserted into the DOM, you need to initialize its collapsible elements right away via JavaScript.

// grab the accordion by its ID
var myAccordion = document.getElementById('myAccordion');

// grab the collapsible triggers for this accordion
var myAccordionTriggers = myAccordion.querySelectorAll('[data-toggle="collapse"]');

// initialize the component for each collapse trigger
for (var i = 0; i < myAccordionTriggers.length; i++){
  new Collapse(myAccordionTriggers[i], {
    parent: myAccordion, // this is the above defined object
    duration: 350 // integer
  });
}

The component grants access to the initialization even for instances where the DATA API was used.

// grab the collapse trigger initialized via DATA API
var myCollapseTrigger = document.getElementById('myCollapseTrigger');

// reference the initialization
var myCollapseTriggerInit = myCollapseTrigger.Collapse;

Examples

Single collapsible element

Here's a quick demo with a single collapsible element, using the .well as the container, exactly as described in the Usage section. The demo also features the original events.

HREF data-target

Accordion / multiple collapsible elements

Here's an Accordion example, built with a set of Panels wrapped in a <div class="panel-group"> element. When the toggle links are clicked, our Collapse component will look for the closest <div class="accordion-className"> or <div id="accordion-id"> via data-parent="selector" and will hide any visible collapsible element.

Remember that all triggering buttons must reference the accordion via data-parent="selector" as described above in order to collapse current opened collapsible element.

Options

The options below allow you to connect a collapse to a parent accordion and a handy option to sync with the animation duration.

Methods

Events

All the component's events are attached to the <div class="carousel"> element, and the event.relatedTarget is the newly activated carousel item. The events provide no mention of the animation direction, because most polyfills do not allow us to set new custom properties to the event objects, we store the transition direction in the initialization object. See the Usage section.

Usage

Via DATA API

The component covers most of the original implementation in regards to DATA API, except that you can ignore data-slide="prev" and data-slide="next" attributes for the controls, but they must have at least the class carousel-control in order to work. The elements with the data-ride="carousel" attribute will be initialized via DATA API, and the basic template looks like this:

<!-- the Carousel component -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/837/300?image=0" alt="">
      <div class="carousel-caption">
      <h3>This is another carousel</h3>
      </div>
    </div>
    <div class="item">
      <img src="https://unsplash.it/837/300?image=10" alt="">
      <div class="carousel-caption">
      <h3>This is a caption</h3>
      </div>
    </div>
    <div class="item">
      <img src="https://unsplash.it/837/300?image=210" alt="">
      <div class="carousel-caption">
      <h3>This is another caption</h3>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

A quick walk through the attributes:

• id="myCarousel" is required only if you inject the above template into the DOM and need a way to target this specific element, unlike the original jQuery plugin that requires this attribute for the its internal event handlers;
• data-ride="carousel" makes the element targetable by the Carousel component;
• data-interval="5000" sets the automatic slide interval;
• data-slide-to="0" when clicked, will slide to the carousel item with that index, 0 (zero) in this case;
• data-slide="prev" / data-slide="next" when clicked, will slide to the next / previous carousel item; these attributes are optional, but the class carousel-control is required;
• class="item active" / class="active" when active is present for an item or indicator, that indicates which carousel item is currently shown to the user, the above .getActiveIndex() method will look for it when needed.

Via JavaScript

The component grants full access to the internal working via JavaScript; whether via the public methods or the original events, you can do a whole bunch of things. Assuming the above markup have been injected into the DOM, let's go ahead and initialize it:

// grab the carousel element
var myCarousel = document.getElementById('myCarousel');

// initialize with some options
var myCarouselInit = new Carousel(myCarousel, { // these options values will override the ones set via DATA API 
  duration: 700,
  interval: false,
  pause: false,
  keyboard: false
});

And now we can play with the methods:

// use getActiveIndex()
var currentActiveItem = myCarouselInit.getActiveIndex();

// jump to a certain item
myCarouselInit.slideTo(2);

// if the carousel was set with `interval: false`
// we can do this to go to the next item
myCarouselInit.cycle();

As you probably expect by now, this component also stores the initialization in the element it targets on initialization, even for instances where the DATA API was used:

// get some carousel item and reference the initialization
var mySpecialCarouselInit = document.getElementById('mySpecialCarousel').Carousel;

// apply methods
mySpecialCarouselInit.cycle();

And now, instead of just writing some code sample on how to use the events, let's actually explain how the carousel at the top of this page works. With the help of the original events and some CSS, let's animate the contents of the items:

// grab the myCarousel on top of the page
var mainSlider = document.getElementById('myCarousel');

// also reference its items in an array
var mainSliderItems = mainSlider.querySelectorAll('.item');

// use the `slide.bs.carousel` event to remove the `slide` class
// FROM the div.carousel-caption of the newly activated item
mainSlider.addEventListener('slide.bs.carousel', function(e) {
  // the Carousel compoenent also stores initialization in the targeted element object
  var currentActiveIndex = mainSlider.Carousel.getActiveIndex(); 
  var activeCaption = mainSliderItems[currentActiveIndex].querySelector('.carousel-caption');
  activeCaption.classList.remove('slide');
});

// use the `slid.bs.carousel` event to add the `slide` class 
// TO the div.carousel-caption of the newly activated item
mainSlider.addEventListener('slid.bs.carousel', function(e) {
  // e.relatedTarget is the newly activated item
  var activeCaption = e.relatedTarget.querySelector('.carousel-caption'); 
  activeCaption.classList.add('slide');
});

To determine the slide direction, we simply access the initialization:

// read direction set by the last transition 
var slideDirection = mainSlider.Carousel.direction;

// read it when `slide.bs.carousel` is triggered
mainSlider.addEventListener('slide.bs.carousel', function(e) {
  slideDirection = mainSlider.Carousel.direction;

  // now do something you need with slideDirection before transition
});

// read it when `slid.bs.carousel` is triggered
mainSlider.addEventListener('slid.bs.carousel', function(e) {
  slideDirection = mainSlider.Carousel.direction;

  // now do something you need with slideDirection after transition
});

Example

This is a test demonstrating the component capabilities and it's events, so open your console, and start clicking, you will be noticed before and after the animation. Also know that there was no active item set by default in the markup, proving the component can successfully manage this case by setting the first item as active on initialization.

This is another carousel

This is a caption

This is another caption

Previous Next

Options

Using static values for offsetTop and / or offsetBottom would work best on non-responsive websites, or when the elements don't change their height when window resize occurs.

Methods

Events

Usage

Required CSS

First we need to make sure our element is properly styled to make sure it works properly. For instance this is the style we needed for the navigation on the right side to make it work:

/* this style applies to mobile devices, on screens SMALLER than 768px */
#side-nav {clear: both}
#side-nav .nav.affix,
#side-nav .nav.affix-bottom { position: relative; margin: 20px 0; } /* relative position recommended */

/* this style applies to other devices, on screens LARGER than 768px */
@media (min-width: 768px) {
  #side-nav .nav.affix, /* the fixed position and a width are required */
  #side-nav .nav.affix-bottom { position: fixed !important; width: 263px; }
  #side-nav .nav.affix { top: 0; }  /* affixedTop position */
  #side-nav .nav.affix-bottom { top: auto; bottom: 100px; }  /* affixedBottom position */
}

In addition, via JavaScript you can ask the browser to update the value of width: 263px; on window resize.

Via DATA API

Alright, we put the styling out of the way, we'll have a look at our example here on this very page. So we configure an element to be pinned to top targeting a certain element's position and a bottom offset of around 120px.

<ul id="myAffix" class="nav nav-stacked" data-spy="affix" data-target="#use" data-offset-bottom="120">
  <!-- menu items -->
</ul>

If everything is set properly you should be able to achieve the same exact effect.

Via JavaScript

Assuming the above element has been injected into the page, you can initialize it via JavaScript:

// grab the element by it's ID
var myAffix = document.getElementById('myAffix');

// initialize
var theAffixInit = new Affix(myAffix, {
  target: '#use',
  offsetBottom: 120,
});

// use the public method any time you see fit
theAffixInit.update();

Also via JavaScript we can set offset options as functions:

// grab the element by it's ID
var myAffix = document.getElementById('myAffix');

// initialize with some cool options
var theAffixInit = new Affix(myAffix, {
  offsetTop: function() {
    var rectTop = document.getElementById('use').getBoundingClientRect().top;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return rectTop + scrollTop;
  },
  offsetBottom: function() {
    var reasonableMargin = 20;
    var elementHeight = myAffix.offsetHeight;
    var footerHeight = document.getElementsByTagName('footer')[0].offsetHeight;
    var maxScroll = Math.max( 
        document.body.scrollHeight, 
        document.body.offsetHeight, 
        document.documentElemnt.clientHeight, 
        document.documentElement.scrollHeight, 
        document.documentElement.offsetHeight );
    return maxScroll - elementHeight - footerHeight - reasonableMargin;
  },
});

Now let's make use of some of the component's original events:

// affix.bs.affix
myAffix.addEventListener('affix.bs.affix', function(event){
  // do something when myAffix is about to be affixed top or bottom
  // event.target is myAffix
}, false);

// affixed-top.bs.affix
myAffix.addEventListener('affixed-top.bs.affix', function(event){
  // do something when myAffix is affixed top
  // event.target is myAffix
}, false);

// and so on

If your element have been initialized by the component via DATA API, you can still access the initialization object:

// grab the element by it's ID
var myAffix = document.getElementById('myAffix');

// reference the initialization
var theAffixInit = myAffix.Affix;

// use the public method
theAffixInit.update();

Example

We don't have a working example for this component in this section, due to the complexity and requirements, however the navigation on the right side of this page is a good example, it covers initialization via DATA API, the required styling and the original events.