diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 614b0e3456ac1d0f46ec4dc61673bdd5993c3e73..00fd56694ca4c7fdf771b27a3ec8674c97d24c2c 100644
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -1,11 +1,5 @@
 $(document).ready(function(){
 
-  // Scrollspy
-  // =========
-
-  $('body > .topbar').scrollSpy()
-
-
   // table sort example
   // ==================
 
diff --git a/docs/index.html b/docs/index.html
index 6c509603292304a385b453d6784bd48b28f79bfe..93f240775c09ad8197fa14cfd7411b6c7f0254bf 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -37,7 +37,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar">
+    <div class="topbar" data-scrollspy="x" >
       <div class="topbar-inner">
         <div class="container">
           <a class="brand" href="#">Bootstrap</a>
@@ -1262,7 +1262,7 @@
   </div>
   <h2>Fixed topbar</h2>
   <div class="topbar-wrapper" style="z-index: 5;">
-    <div class="topbar" data-dropdown>
+    <div class="topbar" data-dropdown="x" >
       <div class="topbar-inner">
         <div class="container">
           <h3><a href="#">Project Name</a></h3>
@@ -1331,7 +1331,7 @@
         <li><a href="#">Messages</a></li>
         <li><a href="#">Settings</a></li>
         <li><a href="#">Contact</a></li>
-        <li class="dropdown" data-dropdown>
+        <li class="dropdown" data-dropdown="x">
           <a href="#" class="dropdown-toggle">Dropdown</a>
           <ul class="dropdown-menu">
             <li><a href="#">Secondary link</a></li>
diff --git a/docs/javascript.html b/docs/javascript.html
index c7f31961d4f1dc80c99e28245dd84fbd4770337c..6d5cf9517e47e3cb49e4151ca2bc715afba0701d 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,7 +39,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar" data-scrollspy>
+    <div class="topbar" data-scrollspy="x" >
       <div class="fill">
         <div class="container">
           <h3><a href="#">Bootstrap JS</a></h3>
@@ -120,7 +120,7 @@
             </tbody>
           </table>
           <h3>Markup</h3>
-          <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
+          <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
 <pre class="prettyprint linenums">
 &lt;a class="btn" data-controls-modal="my-modal" data-backdrop="true" &gt;Launch Modal&lt;/a&gt;
 </pre>
@@ -146,19 +146,11 @@ $('#my-modal').modal({
           <pre class="prettyprint linenums">$('#my-modal').modal(true)</pre>
           <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
           <h3>Events</h3>
-          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:</p>
-
-          <!-- <ul>
-           <li><strong>show</strong> - This event fires immediately when the <code>show</code> instance method is called.</li>
-           <li><strong>shown</strong> - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</li>
-           <li><strong>hide</strong> - This event is fired immediately when the <code>hide</code> instance method has been called.</li>
-           <li><strong>hidden</strong> - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</li>
-          </ul> -->
-
+          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
           <table class="zebra-striped">
             <thead>
              <tr>
-               <th style="width: 150px;">Name</th>
+               <th style="width: 150px;">Event</th>
                <th>Description</th>
              </tr>
             </thead>
@@ -229,7 +221,7 @@ $('#my-modal').bind('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown" data-dropdown&gt;
+  &lt;li class="dropdown" data-dropdown="x" &gt;
     &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
@@ -247,7 +239,7 @@ $('#my-modal').bind('hidden', function () {
           </p>
           <h3>Demo</h3>
           <div class="topbar-wrapper">
-            <div id="topbar-example" class="topbar" data-dropdown>
+            <div id="topbar-example" class="topbar" data-dropdown="x">
               <div class="topbar-inner">
                 <div class="container">
                   <h3><a href="#">Project Name</a></h3>
@@ -303,20 +295,20 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
           <h3>Markup</h3>
           <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
-          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy &gt;...&lt;/div&gt;</pre>
+          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="x" &gt;...&lt;/div&gt;</pre>
           <h3>Methods</h3>
           <h4>$().scrollspy()</h4>
           <p>
           Auto activates navigation buttons by users scroll position.
           </p>
           <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
-           <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> might correspond to a <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+           <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
           </p>
           <h4>.scrollspy('refresh')</h4>
-          <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body like below.</p>
+          <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
           <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
           <h3>Demo</h3>
-          <p>Look at the topbar navigation on this page.</p>
+          <p>Checkout the the topbar navigation on this page.</p>
         </div>
       </div>
     </section>
@@ -338,7 +330,7 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('.tabs').tabs()</pre>
           <h3>Markup</h3>
           <p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
-          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs &gt;...&lt;/ul&gt;</pre>
+          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs="x" &gt;...&lt;/ul&gt;</pre>
           <h3>Methods</h3>
           <h4>$().tabs or $().pills</h4>
           <p>
@@ -366,7 +358,7 @@ $('#my-modal').bind('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Demo</h3>
-          <ul class="tabs" data-tabs >
+          <ul class="tabs" data-tabs="x" >
             <li class="active"><a href="#home">Home</a></li>
             <li><a href="#profile">Profile</a></li>
             <li><a href="#messages">Messages</a></li>
@@ -648,11 +640,11 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
           <p>Closes an alert.</p>
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Demo</h3>
-          <div class="alert-message warning fade in" data-alert >
+          <div class="alert-message warning fade in" data-alert="x" >
             <a class="close" href="#">&times;</a>
             <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
           </div>
-          <div class="alert-message block-message error fade in" data-alert >
+          <div class="alert-message block-message error fade in" data-alert="x" >
             <a class="close" href="#">&times;</a>
             <p><strong>Oh snap! You got an error!</strong> 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.</p>
             <div class="alert-actions">
diff --git a/js/tests/index.html b/js/tests/index.html
index 4f904b9c0c647b12c67e9ea7bc0f4c291afb4cdc..2ca94102ad32752ec1d4cb1809725454f9daeaf0 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
   <script src="vendor/qunit.js"></script>
 
-  <!-- plugin sources -->
+  <!--  plugin sources -->
   <script src="../../js/bootstrap-alerts.js"></script>
   <script src="../../js/bootstrap-dropdown.js"></script>
   <script src="../../js/bootstrap-modal.js"></script>
diff --git a/js/tests/unit/bootstrap-modal.js b/js/tests/unit/bootstrap-modal.js
index 513d287804cd9160b88890478d5211e1b51284e9..4bbb3313cca17c2fc58ca0c51ad705d0283cc03c 100644
--- a/js/tests/unit/bootstrap-modal.js
+++ b/js/tests/unit/bootstrap-modal.js
@@ -16,36 +16,37 @@ $(function () {
         ok($.fn.modal.defaults, 'default object exposed')
       })
 
-      test("should insert into dom when modal:show event is called", function () {
+      test("should insert into dom when show method is called", function () {
         stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:show")
-          .bind("modal:shown", function () {
+          .modal("show")
+          .bind("shown", function () {
             ok($('#modal-test').length, 'modal insterted into dom')
             start()
             div.remove()
           })
       })
 
-      test("should remove from dom when modal:hide is called", function () {
+      test("should hide modal when hide is called", function () {
         stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:show")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
-            div.trigger("modal:hide")
+            div.modal("hide")
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("show")
       })
 
       test("should toggle when toggle is called", function () {
@@ -54,16 +55,17 @@ $(function () {
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:toggle")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
-            div.trigger("modal:toggle")
+            div.modal("toggle")
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("toggle")
       })
 
       test("should remove from dom when click .close", function () {
@@ -72,15 +74,16 @@ $(function () {
         var div = $("<div id='modal-test'><span class='close'></span></div>")
         div
           .modal()
-          .trigger("modal:toggle")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
             div.find('.close').click()
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("toggle")
       })
 })
\ No newline at end of file
diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js
index 42ecd70ae5589da9af29767f1ecd4b4b875f69de..3e13d2fd206ed31ba3035e6aade2e49ecf4a1b85 100644
--- a/js/tests/unit/bootstrap-popover.js
+++ b/js/tests/unit/bootstrap-popover.js
@@ -14,20 +14,20 @@ $(function () {
 
       test("should render popover element", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
+        var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
           .appendTo('#qunit-runoff')
           .popover()
-          .trigger('popover:show')
+          .popover('show')
 
         ok($('.popover').length, 'popover was inserted')
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$(".popover").length, 'popover removed')
         $('#qunit-runoff').empty()
       })
 
       test("should store popover instance in popover data object", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
+        var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
           .popover()
 
         ok(!!popover.data('popover'), 'popover instance exists')
@@ -38,32 +38,37 @@ $(function () {
         var popover = $('<a href="#">@fat</a>')
           .appendTo('#qunit-runoff')
           .popover({
-            title: '@fat'
-          , content: 'loves writing tests （╯°□°）╯︵ ┻━┻'
+            title: function () {
+              return '@fat'
+            }
+          , content: function () {
+              return 'loves writing tests （╯°□°）╯︵ ┻━┻'
+            }
           })
-          .trigger('popover:show')
+
+        popover.popover('show')
 
         ok($('.popover').length, 'popover was inserted')
         equals($('.popover .title').text(), '@fat', 'title correctly inserted')
         equals($('.popover .content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
 
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$('.popover').length, 'popover was removed')
         $('#qunit-runoff').empty()
       })
 
       test("should get title and content from attributes", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
+        var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
           .appendTo('#qunit-runoff')
           .popover()
-          .trigger('popover:show')
+          .popover('show')
 
         ok($('.popover').length, 'popover was inserted')
         equals($('.popover .title').text(), '@mdo', 'title correctly inserted')
         equals($('.popover .content').text(), "loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻", 'content correctly inserted')
 
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$('.popover').length, 'popover was removed')
         $('#qunit-runoff').empty()
       })
diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js
index 05de7e9380640446df64047c4231937b4b129216..04000696ae0dbe0e31763c6bbe44d2cb7379fe10 100644
--- a/js/tests/unit/bootstrap-twipsy.js
+++ b/js/tests/unit/bootstrap-twipsy.js
@@ -31,10 +31,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({placement: 'below'})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -44,10 +44,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({fallback: '@fat'})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         equals($(".twipsy").text(), "@fat", 'has correct default text')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -57,10 +57,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
           .appendTo('#qunit-runoff')
           .twipsy()
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok(!$('.twipsy b').length, 'b tag was not inserted')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -70,10 +70,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({html: true})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok($('.twipsy b').length, 'b tag was inserted')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })