aboutsummaryrefslogtreecommitdiff
path: root/docs/javascript.html
diff options
context:
space:
mode:
Diffstat (limited to 'docs/javascript.html')
-rw-r--r--docs/javascript.html20
1 files changed, 15 insertions, 5 deletions
diff --git a/docs/javascript.html b/docs/javascript.html
index a530b21e0..6c028e01e 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -58,7 +58,7 @@
<a href="./components.html">Components</a>
</li>
<li class="active">
- <a href="./javascript.html">Javascript</a>
+ <a href="./javascript.html">JavaScript</a>
</li>
<li class="">
<a href="./customize.html">Customize</a>
@@ -120,7 +120,7 @@
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
<pre class="prettyprint linenums">$('body').off('.data-api')</pre>
- <p>Alternatively, to target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:</p>
+ <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
<pre class="prettyprint linenums">$('body').off('.alert.data-api')</pre>
<h3>Programmatic API</h3>
@@ -132,10 +132,10 @@ $("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with no keyboard
$("#myModal").modal('show') // initializes and invokes show immediately</p>
</pre>
- <p>Each plugin also exposes it's raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+ <p>Each plugin also exposes its raw constructor on a `Constructor` property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
<h3>Events</h3>
- <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and it's past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+ <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide preventDefault functionality. This provides the abililty to stop the execution of an action before it starts.</p>
<pre class="prettyprint linenums">
$('#myModal').on('show', function (e) {
@@ -253,7 +253,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt;-- Modal --&gt;
-&lt;div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
+&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
@@ -925,6 +925,16 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<a href="#" class="btn btn-large btn-danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
+ <h4>Four directions</h4>
+ <div class="bs-docs-example tooltip-demo">
+ <ul class="bs-docs-tooltip-examples">
+ <li><a href="#" class="btn" rel="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on top">Popover on top</a></li>
+ <li><a href="#" class="btn" rel="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on right">Popover on right</a></li>
+ <li><a href="#" class="btn" rel="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on bottom">Popover on bottom</a></li>
+ <li><a href="#" class="btn" rel="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." title="Popover on left">Popover on left</a></li>
+ </ul>
+ </div>
+
<hr class="bs-docs-separator">