diff --git a/docs/javascript.html b/docs/javascript.html
index 2e68dbb2bbe331b8de2ae506acbf4169e0af4c75..36299d776f7a956f2b347c8db1dc41edfc8c9eee 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -894,351 +894,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
</div>
- <h2>Examples</h2>
- <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong></p>
-
- <h3>Static popover</h3>
- <p>Four options are available: top, right, bottom, and left aligned.</p>
- <div class="bs-docs-example bs-docs-example-popover">
- <div class="popover top">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover top</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
- </div>
-
- <div class="popover right">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover right</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
- </div>
-
- <div class="popover bottom">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover bottom</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
+ <div class="popover right">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover right</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
+ </div>
- <div class="popover left">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover left</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
+ <div class="popover bottom">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover bottom</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
-
- <div class="clearfix"></div>
</div>
- <p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
- <h3>Live demo</h3>
- <div class="bs-docs-example" style="padding-bottom: 24px;">
- <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?">Hover for popover</a>
+ <div class="popover left">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover left</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
</div>
+ <div class="clearfix"></div>
+ </div>
+ <p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
- <hr class="bs-docs-separator">
-
-
- <h2>Usage</h2>
- <p>Enable popovers via javascript:</p>
- <pre class="prettyprint linenums">$('#example').popover(options)</pre>
-
- <h3>Options</h3>
- <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>animation</td>
- <td>boolean</td>
- <td>true</td>
- <td>apply a css fade transition to the tooltip</td>
- </tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>true</td>
- <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
- </tr>
- <tr>
- <td>placement</td>
- <td>string|function</td>
- <td>'right'</td>
- <td>how to position the popover - top | bottom | left | right</td>
- </tr>
- <tr>
- <td>selector</td>
- <td>string</td>
- <td>false</td>
- <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
- </tr>
- <tr>
- <td>trigger</td>
- <td>string</td>
- <td>'hover'</td>
- <td>how popover is triggered - hover | focus | manual</td>
- </tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>''</td>
- <td>default title value if `title` attribute isn't present</td>
- </tr>
- <tr>
- <td>content</td>
- <td>string | function</td>
- <td>''</td>
- <td>default content value if `data-content` attribute isn't present</td>
- </tr>
- <tr>
- <td>delay</td>
- <td>number | object</td>
- <td>0</td>
- <td>
- <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="alert alert-info">
- <strong>Heads up!</strong>
- Options for individual popovers can alternatively be specified through the use of data attributes.
- </div>
+ <h3>Live demo</h3>
+ <div class="bs-docs-example" style="padding-bottom: 24px;">
+ <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?">Hover for popover</a>
+ </div>
- <h3>Markup</h3>
- <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
- <h3>Methods</h3>
- <h4>$().popover(options)</h4>
- <p>Initializes popovers for an element collection.</p>
- <h4>.popover('show')</h4>
- <p>Reveals an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('show')</pre>
- <h4>.popover('hide')</h4>
- <p>Hides an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
- <h4>.popover('toggle')</h4>
- <p>Toggles an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
- <h4>.popover('destroy')</h4>
- <p>Hides and destroys an element's popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
- </section>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Usage</h2>
+ <p>Enable popovers via javascript:</p>
+ <pre class="prettyprint linenums">$('#example').popover(options)</pre>
+
+ <h3>Options</h3>
+ <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>apply a css fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string|function</td>
+ <td>'right'</td>
+ <td>how to position the popover - top | bottom | left | right</td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'hover'</td>
+ <td>how popover is triggered - hover | focus | manual</td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>default title value if `title` attribute isn't present</td>
+ </tr>
+ <tr>
+ <td>content</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>default content value if `data-content` attribute isn't present</td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="alert alert-info">
+ <strong>Heads up!</strong>
+ Options for individual popovers can alternatively be specified through the use of data attributes.
+ </div>
+ <h3>Markup</h3>
+ <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
+
+ <h3>Methods</h3>
+ <h4>$().popover(options)</h4>
+ <p>Initializes popovers for an element collection.</p>
+ <h4>.popover('show')</h4>
+ <p>Reveals an elements popover.</p>
+ <pre class="prettyprint linenums">$('#element').popover('show')</pre>
+ <h4>.popover('hide')</h4>
+ <p>Hides an elements popover.</p>
+ <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
+ <h4>.popover('toggle')</h4>
+ <p>Toggles an elements popover.</p>
+ <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
+ <h4>.popover('destroy')</h4>
+ <p>Hides and destroys an element's popover.</p>
+ <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
+ </section>
+
+
+
+ <!-- Alert
+ ================================================== -->
+ <section id="alerts">
+ <div class="page-header">
+ <h1>Alert messages <small>bootstrap-alert.js</small></h1>
+ </div>
- <!-- Alert
- ================================================== -->
- <section id="alerts">
- <div class="page-header">
- <h1>Alert messages <small>bootstrap-alert.js</small></h1>
+ <h2>Example alerts</h2>
+ <p>Add dismiss functionality to all alerge messages with this plugin.</p>
+ <div class="bs-docs-example">
+ <div class="alert fade in">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
+ </div>
-
- <h2>Example alerts</h2>
- <p>Add dismiss functionality to all alerge messages with this plugin.</p>
- <div class="bs-docs-example">
- <div class="alert fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
- </div>
- <p>No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.</p>
-
- <h3>Live demo</h3>
- <div class="bs-docs-example" style="padding-bottom: 24px;">
- <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?">Hover for popover</a>
- </div>
-
-
- <hr class="bs-docs-separator">
-
-
- <h2>Usage</h2>
- <p>Enable popovers via javascript:</p>
- <pre class="prettyprint linenums">$('#example').popover(options)</pre>
-
- <h3>Options</h3>
- <p>Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>animation</td>
- <td>boolean</td>
- <td>true</td>
- <td>apply a css fade transition to the tooltip</td>
- </tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>true</td>
- <td>Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.</td>
- </tr>
- <tr>
- <td>placement</td>
- <td>string|function</td>
- <td>'right'</td>
- <td>how to position the popover - top | bottom | left | right</td>
- </tr>
- <tr>
- <td>selector</td>
- <td>string</td>
- <td>false</td>
- <td>if a selector is provided, tooltip objects will be delegated to the specified targets</td>
- </tr>
- <tr>
- <td>trigger</td>
- <td>string</td>
- <td>'hover'</td>
- <td>how popover is triggered - hover | focus | manual</td>
- </tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>''</td>
- <td>default title value if `title` attribute isn't present</td>
- </tr>
- <tr>
- <td>content</td>
- <td>string | function</td>
- <td>''</td>
- <td>default content value if `data-content` attribute isn't present</td>
- </tr>
- <tr>
- <td>delay</td>
- <td>number | object</td>
- <td>0</td>
- <td>
- <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="alert alert-info">
- <strong>Heads up!</strong>
- Options for individual popovers can alternatively be specified through the use of data attributes.
- </div>
-
- <h3>Markup</h3>
- <p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
-
- <h3>Methods</h3>
- <h4>$().popover(options)</h4>
- <p>Initializes popovers for an element collection.</p>
- <h4>.popover('show')</h4>
- <p>Reveals an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('show')</pre>
- <h4>.popover('hide')</h4>
- <p>Hides an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
- <h4>.popover('toggle')</h4>
- <p>Toggles an elements popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
- <h4>.popover('destroy')</h4>
- <p>Destroys an element's popover.</p>
- <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
- </section>
-
-
-
- <!-- Alert
- ================================================== -->
- <section id="alerts">
- <div class="page-header">
- <h1>Alert messages <small>bootstrap-alert.js</small></h1>
- </div>
-
-
- <h2>Example alerts</h2>
- <p>Add dismiss functionality to all alerge messages with this plugin.</p>
- <div class="bs-docs-example">
- <div class="alert fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
- </div>
- </div>
-
- <div class="bs-docs-example">
- <div class="alert alert-block alert-error fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <h4 class="alert-heading">Oh snap! You got an error!</h4>
- <p>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>
- <p>
- <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
- </p>
- </div>
- </div>
-
-
- <hr class="bs-docs-separator">
-
-
- <h2>Usage</h2>
- <p>Enable dismissal of an alert via javascript:</p>
- <pre class="prettyprint linenums">$(".alert").alert()</pre>
-
- <h3>Markup</h3>
- <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
- <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
-
- <h3>Methods</h3>
- <h4>$().alert()</h4>
- <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
- <h4>.alert('close')</h4>
- <p>Closes an alert.</p>
- <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
+ <div class="bs-docs-example">
+ <div class="alert alert-block alert-error fade in">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <h4 class="alert-heading">Oh snap! You got an error!</h4>
+ <p>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>
+ <p>
+ <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
+ </p>
+ </div>
+ </div>
- <h3>Events</h3>
- <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 150px;">Event</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>close</td>
- <td>This event fires immediately when the <code>close</code> instance method is called.</td>
- </tr>
- <tr>
- <td>closed</td>
- <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
- </tr>
- </tbody>
- </table>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Usage</h2>
+ <p>Enable dismissal of an alert via javascript:</p>
+ <pre class="prettyprint linenums">$(".alert").alert()</pre>
+
+ <h3>Markup</h3>
+ <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
+ <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
+
+ <h3>Methods</h3>
+ <h4>$().alert()</h4>
+ <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+ <h4>.alert('close')</h4>
+ <p>Closes an alert.</p>
+ <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
+
+
+ <h3>Events</h3>
+ <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>close</td>
+ <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>closed</td>
+ <td>This event is fired when the alert has been closed (will wait for css transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
// do something…
})
</pre>
- </section>
+ </section>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 9f93620c33fb77ebdb01a3c5fa3c41db4f78192f..f4c6e8b68955fe9e49c61d7701648fdd880631d3 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -824,351 +824,214 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
</div>
- <h2>{{_i}}Examples{{/i}}</h2>
- <p>{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover. <strong>Requires <a href="#tooltips">Tooltip</a> to be included.</strong>{{/i}}</p>
-
- <h3>{{_i}}Static popover{{/i}}</h3>
- <p>{{_i}}Four options are available: top, right, bottom, and left aligned.{{/i}}</p>
- <div class="bs-docs-example bs-docs-example-popover">
- <div class="popover top">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover top</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
- </div>
-
- <div class="popover right">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover right</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
- </div>
-
- <div class="popover bottom">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover bottom</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
+ <div class="popover right">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover right</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
+ </div>
- <div class="popover left">
- <div class="arrow"></div>
- <h3 class="popover-title">Popover left</h3>
- <div class="popover-content">
- <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
- </div>
+ <div class="popover bottom">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover bottom</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
-
- <div class="clearfix"></div>
</div>
- <p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
- <h3>Live demo</h3>
- <div class="bs-docs-example" style="padding-bottom: 24px;">
- <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?">{{_i}}Hover for popover{{/i}}</a>
+ <div class="popover left">
+ <div class="arrow"></div>
+ <h3 class="popover-title">Popover left</h3>
+ <div class="popover-content">
+ <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
+ </div>
</div>
+ <div class="clearfix"></div>
+ </div>
+ <p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
- <hr class="bs-docs-separator">
-
-
- <h2>{{_i}}Usage{{/i}}</h2>
- <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
- <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
-
- <h3>{{_i}}Options{{/i}}</h3>
- <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 100px;">{{_i}}Name{{/i}}</th>
- <th style="width: 100px;">{{_i}}type{{/i}}</th>
- <th style="width: 50px;">{{_i}}default{{/i}}</th>
- <th>{{_i}}description{{/i}}</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{_i}}animation{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
- <td>true</td>
- <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}html{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
- <td>true</td>
- <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}placement{{/i}}</td>
- <td>{{_i}}string|function{{/i}}</td>
- <td>'right'</td>
- <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
- </tr>
- <tr>
- <td>{{_i}}selector{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
- <td>false</td>
- <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}trigger{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
- <td>'hover'</td>
- <td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
- </tr>
- <tr>
- <td>{{_i}}title{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
- <td>''</td>
- <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}content{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
- <td>''</td>
- <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}delay{{/i}}</td>
- <td>{{_i}}number | object{{/i}}</td>
- <td>0</td>
- <td>
- <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
- <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
- <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="alert alert-info">
- <strong>{{_i}}Heads up!{{/i}}</strong>
- {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
- </div>
+ <h3>Live demo</h3>
+ <div class="bs-docs-example" style="padding-bottom: 24px;">
+ <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?">{{_i}}Hover for popover{{/i}}</a>
+ </div>
- <h3>{{_i}}Markup{{/i}}</h3>
- <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
- <h3>{{_i}}Methods{{/i}}</h3>
- <h4>$().popover({{_i}}options{{/i}})</h4>
- <p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
- <h4>.popover('show')</h4>
- <p>{{_i}}Reveals an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('show')</pre>
- <h4>.popover('hide')</h4>
- <p>{{_i}}Hides an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
- <h4>.popover('toggle')</h4>
- <p>{{_i}}Toggles an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
- <h4>.popover('destroy')</h4>
- <p>{{_i}}Hides and destroys an element's popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
- </section>
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Usage{{/i}}</h2>
+ <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
+ <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
+
+ <h3>{{_i}}Options{{/i}}</h3>
+ <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 100px;">{{_i}}Name{{/i}}</th>
+ <th style="width: 100px;">{{_i}}type{{/i}}</th>
+ <th style="width: 50px;">{{_i}}default{{/i}}</th>
+ <th>{{_i}}description{{/i}}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{_i}}animation{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
+ <td>true</td>
+ <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}html{{/i}}</td>
+ <td>{{_i}}boolean{{/i}}</td>
+ <td>true</td>
+ <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}placement{{/i}}</td>
+ <td>{{_i}}string|function{{/i}}</td>
+ <td>'right'</td>
+ <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
+ </tr>
+ <tr>
+ <td>{{_i}}selector{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
+ <td>false</td>
+ <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}trigger{{/i}}</td>
+ <td>{{_i}}string{{/i}}</td>
+ <td>'hover'</td>
+ <td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
+ </tr>
+ <tr>
+ <td>{{_i}}title{{/i}}</td>
+ <td>{{_i}}string | function{{/i}}</td>
+ <td>''</td>
+ <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}content{{/i}}</td>
+ <td>{{_i}}string | function{{/i}}</td>
+ <td>''</td>
+ <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}delay{{/i}}</td>
+ <td>{{_i}}number | object{{/i}}</td>
+ <td>0</td>
+ <td>
+ <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
+ <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
+ <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="alert alert-info">
+ <strong>{{_i}}Heads up!{{/i}}</strong>
+ {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
+ </div>
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
+
+ <h3>{{_i}}Methods{{/i}}</h3>
+ <h4>$().popover({{_i}}options{{/i}})</h4>
+ <p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
+ <h4>.popover('show')</h4>
+ <p>{{_i}}Reveals an elements popover.{{/i}}</p>
+ <pre class="prettyprint linenums">$('#element').popover('show')</pre>
+ <h4>.popover('hide')</h4>
+ <p>{{_i}}Hides an elements popover.{{/i}}</p>
+ <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
+ <h4>.popover('toggle')</h4>
+ <p>{{_i}}Toggles an elements popover.{{/i}}</p>
+ <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
+ <h4>.popover('destroy')</h4>
+ <p>{{_i}}Hides and destroys an element's popover.{{/i}}</p>
+ <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
+ </section>
+
+
+
+ <!-- Alert
+ ================================================== -->
+ <section id="alerts">
+ <div class="page-header">
+ <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
+ </div>
- <!-- Alert
- ================================================== -->
- <section id="alerts">
- <div class="page-header">
- <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
+ <h2>{{_i}}Example alerts{{/i}}</h2>
+ <p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="alert fade in">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
-
-
- <h2>{{_i}}Example alerts{{/i}}</h2>
- <p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
- <div class="bs-docs-example">
- <div class="alert fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
- </div>
- <p>{{_i}}No markup shown as popovers are generated from javascript and content within a <code>data</code> attribute.{{/i}}</p>
-
- <h3>Live demo</h3>
- <div class="bs-docs-example" style="padding-bottom: 24px;">
- <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?">{{_i}}Hover for popover{{/i}}</a>
- </div>
-
-
- <hr class="bs-docs-separator">
-
-
- <h2>{{_i}}Usage{{/i}}</h2>
- <p>{{_i}}Enable popovers via javascript:{{/i}}</p>
- <pre class="prettyprint linenums">$('#example').popover({{_i}}options{{/i}})</pre>
-
- <h3>{{_i}}Options{{/i}}</h3>
- <p>{{_i}}Options can be passed via data attributes or javascript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.{{/i}}</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 100px;">{{_i}}Name{{/i}}</th>
- <th style="width: 100px;">{{_i}}type{{/i}}</th>
- <th style="width: 50px;">{{_i}}default{{/i}}</th>
- <th>{{_i}}description{{/i}}</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{_i}}animation{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
- <td>true</td>
- <td>{{_i}}apply a css fade transition to the tooltip{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}html{{/i}}</td>
- <td>{{_i}}boolean{{/i}}</td>
- <td>true</td>
- <td>{{_i}}Insert html into the popover. If false, jquery's <code>text</code> method will be used to insert content into the dom. Use text if you're worried about XSS attacks.{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}placement{{/i}}</td>
- <td>{{_i}}string|function{{/i}}</td>
- <td>'right'</td>
- <td>{{_i}}how to position the popover{{/i}} - top | bottom | left | right</td>
- </tr>
- <tr>
- <td>{{_i}}selector{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
- <td>false</td>
- <td>{{_i}}if a selector is provided, tooltip objects will be delegated to the specified targets{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}trigger{{/i}}</td>
- <td>{{_i}}string{{/i}}</td>
- <td>'hover'</td>
- <td>{{_i}}how popover is triggered{{/i}} - hover | focus | manual</td>
- </tr>
- <tr>
- <td>{{_i}}title{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
- <td>''</td>
- <td>{{_i}}default title value if `title` attribute isn't present{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}content{{/i}}</td>
- <td>{{_i}}string | function{{/i}}</td>
- <td>''</td>
- <td>{{_i}}default content value if `data-content` attribute isn't present{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}delay{{/i}}</td>
- <td>{{_i}}number | object{{/i}}</td>
- <td>0</td>
- <td>
- <p>{{_i}}delay showing and hiding the popover (ms) - does not apply to manual trigger type{{/i}}</p>
- <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
- <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="alert alert-info">
- <strong>{{_i}}Heads up!{{/i}}</strong>
- {{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
- </div>
-
- <h3>{{_i}}Markup{{/i}}</h3>
- <p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
-
- <h3>{{_i}}Methods{{/i}}</h3>
- <h4>$().popover({{_i}}options{{/i}})</h4>
- <p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
- <h4>.popover('show')</h4>
- <p>{{_i}}Reveals an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('show')</pre>
- <h4>.popover('hide')</h4>
- <p>{{_i}}Hides an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
- <h4>.popover('toggle')</h4>
- <p>{{_i}}Toggles an elements popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('toggle')</pre>
- <h4>.popover('destroy')</h4>
- <p>{{_i}}Destroys an element's popover.{{/i}}</p>
- <pre class="prettyprint linenums">$('#element').popover('destroy')</pre>
- </section>
-
-
-
- <!-- Alert
- ================================================== -->
- <section id="alerts">
- <div class="page-header">
- <h1>{{_i}}Alert messages{{/i}} <small>bootstrap-alert.js</small></h1>
- </div>
-
-
- <h2>{{_i}}Example alerts{{/i}}</h2>
- <p>{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}</p>
- <div class="bs-docs-example">
- <div class="alert fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
- </div>
- </div>{{! /example }}
-
- <div class="bs-docs-example">
- <div class="alert alert-block alert-error fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
- <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
- <p>{{_i}}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.{{/i}}</p>
- <p>
- <a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
- </p>
- </div>
- </div>{{! /example }}
-
-
- <hr class="bs-docs-separator">
-
-
- <h2>{{_i}}Usage{{/i}}</h2>
- <p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
- <pre class="prettyprint linenums">$(".alert").alert()</pre>
-
- <h3>{{_i}}Markup{{/i}}</h3>
- <p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
- <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
-
- <h3>{{_i}}Methods{{/i}}</h3>
- <h4>$().alert()</h4>
- <p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
- <h4>.alert('close')</h4>
- <p>{{_i}}Closes an alert.{{/i}}</p>
- <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
-
-
- <h3>{{_i}}Events{{/i}}</h3>
- <p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
- <table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 150px;">{{_i}}Event{{/i}}</th>
- <th>{{_i}}Description{{/i}}</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{_i}}close{{/i}}</td>
- <td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
- </tr>
- <tr>
- <td>{{_i}}closed{{/i}}</td>
- <td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
- </tr>
- </tbody>
- </table>
+ </div>{{! /example }}
+
+ <div class="bs-docs-example">
+ <div class="alert alert-block alert-error fade in">
+ <button type="button" class="close" data-dismiss="alert">×</button>
+ <h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
+ <p>{{_i}}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.{{/i}}</p>
+ <p>
+ <a class="btn btn-danger" href="#">{{_i}}Take this action{{/i}}</a> <a class="btn" href="#">{{_i}}Or do this{{/i}}</a>
+ </p>
+ </div>
+ </div>{{! /example }}
+
+
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Usage{{/i}}</h2>
+ <p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
+ <pre class="prettyprint linenums">$(".alert").alert()</pre>
+
+ <h3>{{_i}}Markup{{/i}}</h3>
+ <p>{{_i}}Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.{{/i}}</p>
+ <pre class="prettyprint linenums"><a class="close" data-dismiss="alert" href="#">&times;</a></pre>
+
+ <h3>{{_i}}Methods{{/i}}</h3>
+ <h4>$().alert()</h4>
+ <p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
+ <h4>.alert('close')</h4>
+ <p>{{_i}}Closes an alert.{{/i}}</p>
+ <pre class="prettyprint linenums">$(".alert").alert('close')</pre>
+
+
+ <h3>{{_i}}Events{{/i}}</h3>
+ <p>{{_i}}Bootstrap's alert class exposes a few events for hooking into alert functionality.{{/i}}</p>
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">{{_i}}Event{{/i}}</th>
+ <th>{{_i}}Description{{/i}}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{_i}}close{{/i}}</td>
+ <td>{{_i}}This event fires immediately when the <code>close</code> instance method is called.{{/i}}</td>
+ </tr>
+ <tr>
+ <td>{{_i}}closed{{/i}}</td>
+ <td>{{_i}}This event is fired when the alert has been closed (will wait for css transitions to complete).{{/i}}</td>
+ </tr>
+ </tbody>
+ </table>
<pre class="prettyprint linenums">
$('#my-alert').bind('closed', function () {
// {{_i}}do something…{{/i}}
})
</pre>
- </section>
+ </section>