aboutsummaryrefslogtreecommitdiff
path: root/docs/_includes/js
diff options
context:
space:
mode:
Diffstat (limited to 'docs/_includes/js')
-rw-r--r--docs/_includes/js/affix.html14
-rw-r--r--docs/_includes/js/alerts.html2
-rw-r--r--docs/_includes/js/carousel.html11
-rw-r--r--docs/_includes/js/collapse.html12
-rw-r--r--docs/_includes/js/dropdowns.html2
-rw-r--r--docs/_includes/js/modal.html125
-rw-r--r--docs/_includes/js/overview.html8
-rw-r--r--docs/_includes/js/popovers.html27
-rw-r--r--docs/_includes/js/scrollspy.html10
-rw-r--r--docs/_includes/js/tabs.html2
-rw-r--r--docs/_includes/js/tooltips.html18
11 files changed, 168 insertions, 63 deletions
diff --git a/docs/_includes/js/affix.html b/docs/_includes/js/affix.html
index 3cb846ea9..5eaed7028 100644
--- a/docs/_includes/js/affix.html
+++ b/docs/_includes/js/affix.html
@@ -2,7 +2,7 @@
<h1 id="affix" class="page-header">Affix <small>affix.js</small></h1>
<h2 id="affix-examples">Example</h2>
- <p>The subnavigation on the right is a live demo of the affix plugin.</p>
+ <p>The affix plugin toggles <code>position: fixed;</code> on and off, emulating the effect found with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning"><code>position: sticky;</code></a>. The subnavigation on the right is a live demo of the affix plugin.</p>
<hr class="bs-docs-separator">
@@ -10,7 +10,7 @@
<p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
<h3>Positioning via CSS</h3>
- <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
+ <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles, with the exception of <code>position: fixed;</code> on <code>.affix</code>, for these classes yourself (independent of this plugin) to handle the actual positions.</p>
<p>Here's how the affix plugin works:</p>
<ol>
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in its top-most position. At this point no CSS positioning is required.</li>
@@ -46,12 +46,12 @@ $('#myAffix').affix({
<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-offset-top="200"</code>.</p>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
+ <th>Name</th>
+ <th>type</th>
+ <th>default</th>
<th>description</th>
</tr>
</thead>
@@ -80,7 +80,7 @@ $('#myAffix').affix({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/alerts.html b/docs/_includes/js/alerts.html
index 399cd732f..7f3bf99c2 100644
--- a/docs/_includes/js/alerts.html
+++ b/docs/_includes/js/alerts.html
@@ -49,7 +49,7 @@
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index bf2fbecec..6234032fb 100644
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -155,12 +155,12 @@ $('.carousel').carousel()
<h3 id="carousel-options">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-interval=""</code>.</p>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
+ <th>Name</th>
+ <th>type</th>
+ <th>default</th>
<th>description</th>
</tr>
</thead>
@@ -226,11 +226,12 @@ $('.carousel').carousel({
<li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li>
<li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li>
</ul>
+ <p>All carousel events are fired at the carousel itself (i.e. at the <code>&lt;div class="carousel"&gt;</code>).</p>
<div class="table-responsive">
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/collapse.html b/docs/_includes/js/collapse.html
index ca84ac857..e193098cc 100644
--- a/docs/_includes/js/collapse.html
+++ b/docs/_includes/js/collapse.html
@@ -192,12 +192,12 @@ $('.collapse').collapse()
<h3 id="collapse-options">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-parent=""</code>.</p>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
+ <th>Name</th>
+ <th>type</th>
+ <th>default</th>
<th>description</th>
</tr>
</thead>
@@ -221,7 +221,7 @@ $('.collapse').collapse()
<h3 id="collapse-methods">Methods</h3>
<h4>.collapse(options)</h4>
- <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
+ <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.</p>
{% highlight js %}
$('#myCollapsible').collapse({
toggle: false
@@ -243,7 +243,7 @@ $('#myCollapsible').collapse({
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/dropdowns.html b/docs/_includes/js/dropdowns.html
index 683453096..d00c4da38 100644
--- a/docs/_includes/js/dropdowns.html
+++ b/docs/_includes/js/dropdowns.html
@@ -169,7 +169,7 @@ $('.dropdown-toggle').dropdown()
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/modal.html b/docs/_includes/js/modal.html
index f5861f4a5..1b653d17c 100644
--- a/docs/_includes/js/modal.html
+++ b/docs/_includes/js/modal.html
@@ -16,11 +16,11 @@
</div>
<p><strong class="text-danger">Due to how HTML5 defines its semantics, the <code>autofocus</code> HTML attribute has no effect in Bootstrap modals.</strong> To achieve the same effect, use some custom JavaScript:</p>
- {% highlight js %}
- $('#myModal').on('shown.bs.modal', function () {
- $('#myInput').focus()
- })
- {% endhighlight %}
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+ $('#myInput').focus()
+})
+{% endhighlight %}
<h2 id="modals-examples">Examples</h2>
@@ -108,7 +108,7 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
- <div class="bs-example" style="padding-bottom: 24px;">
+ <div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
@@ -218,12 +218,108 @@
</div>
{% endhighlight %}
+ <h2 id="modals-grid-system">Using the grid system</h2>
+ <p>To take advantage of the Bootstrap grid system within a modal, just nest <code>.container-fluid</code> within the <code>.modal-body</code> and then use the normal grid system classes within this container.</p>
+<!-- sample modal content -->
+ <div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" 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">&times;</span></button>
+ <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-9">
+ Level 1: .col-sm-9
+ <div class="row">
+ <div class="col-xs-8 col-sm-6">
+ Level 2: .col-xs-8 .col-sm-6
+ </div>
+ <div class="col-xs-4 col-sm-6">
+ Level 2: .col-xs-4 .col-sm-6
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+<div class="bs-example bs-example-padded-bottom">
+ <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
+ Launch demo modal
+ </button>
+</div><!-- /example -->
+{% highlight html %}
+<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" 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">&times;</span></button>
+ <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
+ </div>
+ <div class="modal-body">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-4">.col-md-4</div>
+ <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+ <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+ </div>
+ <div class="row">
+ <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+ </div>
+ <div class="row">
+ <div class="col-sm-9">
+ Level 1: .col-sm-9
+ <div class="row">
+ <div class="col-xs-8 col-sm-6">
+ Level 2: .col-xs-8 .col-sm-6
+ </div>
+ <div class="col-xs-4 col-sm-6">
+ Level 2: .col-xs-4 .col-sm-6
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
+ </div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+{% endhighlight %}
+
<h2 id="modals-related-target">Varying modal content based on trigger button</h2>
<p>Have a bunch of buttons that all trigger the same modal, just with slightly different contents? Use <code>event.relatedTarget</code> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML <code>data-*</code> attributes</a> (possibly <a href="http://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked. See the Modal Events docs for details on <code>relatedTarget</code>,</p>
- <div class="bs-example" style="padding-bottom: 24px;">
+ <div class="bs-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -256,7 +352,7 @@
{% highlight html %}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@twbootstrap">Open modal for @twbootstrap</button>
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
@@ -314,12 +410,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
<h3 id="modals-options">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-backdrop=""</code>.</p>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 50px;">type</th>
- <th style="width: 50px;">default</th>
+ <th>Name</th>
+ <th>type</th>
+ <th>default</th>
<th>description</th>
</tr>
</thead>
@@ -382,11 +478,12 @@ $('#myModal').modal({
<h3 id="modals-events">Events</h3>
<p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p>
+ <p>All modal events are fired at the modal itself (i.e. at the <code>&lt;div class="modal"&gt;</code>).</p>
<div class="table-responsive">
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/overview.html b/docs/_includes/js/overview.html
index b95bb6c5f..930509c76 100644
--- a/docs/_includes/js/overview.html
+++ b/docs/_includes/js/overview.html
@@ -48,7 +48,7 @@ $('#myModal').modal('show') // initializes and invokes show immed
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> 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>
<h4>Default settings</h4>
- <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:<p>
+ <p>You can change the default settings for a plugin by modifying the plugin's <code>Constructor.DEFAULTS</code> object:</p>
{% highlight js %}
$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false
{% endhighlight %}
@@ -70,6 +70,12 @@ $('#myModal').on('show.bs.modal', function (e) {
})
{% endhighlight %}
+ <h3 id="js-version-nums">Version numbers</h3>
+ <p>The version of each of Bootstrap's jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin's constructor. For example, for the tooltip plugin:</p>
+{% highlight js %}
+$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
+{% endhighlight %}
+
<h3 id="js-disabled">No special fallbacks when JavaScript is disabled</h3>
<p>Bootstrap's plugins don't fall back particularly gracefully when JavaScript is disabled. If you care about the user experience in this case, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a> to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.</p>
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index 321c93d9b..c827a7ff6 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -76,7 +76,7 @@ $(function () {
</div>
<h3>Live demo</h3>
- <div class="bs-example" style="padding-bottom: 24px;">
+ <div class="bs-example bs-example-padded-bottom">
<button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
{% highlight html %}
@@ -125,11 +125,11 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<h4>Specific markup required for dismiss-on-next-click</h4>
<p>For proper cross-browser and cross-platform behavior, you must use the <code>&lt;a&gt;</code> tag, <i>not</i> the <code>&lt;button&gt;</code> tag, and you also must include a <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex"><code>tabindex</code></a> attribute.</p>
</div>
- <div class="bs-example" style="padding-bottom: 24px;">
- <a href="#" tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+ <div class="bs-example bs-example-padded-bottom">
+ <a tabindex="0" class="btn btn-lg btn-danger bs-docs-popover" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
</div>
{% highlight html %}
-<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
+<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
{% endhighlight %}
@@ -140,12 +140,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<h3 id="popovers-options">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>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">Type</th>
- <th style="width: 50px;">Default</th>
+ <th>Name</th>
+ <th>Type</th>
+ <th>Default</th>
<th>Description</th>
</tr>
</thead>
@@ -252,26 +252,27 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
<p>Initializes popovers for an element collection.</p>
<h4>.popover('show')</h4>
- <p>Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.</p>
+ <p>Reveals an element's popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <code>shown.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.</p>
{% highlight js %}$('#element').popover('show'){% endhighlight %}
<h4>.popover('hide')</h4>
- <p>Hides an element's popover.</p>
+ <p>Hides an element's popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
{% highlight js %}$('#element').popover('hide'){% endhighlight %}
<h4>.popover('toggle')</h4>
- <p>Toggles an element's popover.</p>
+ <p>Toggles an element's popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.popover</code> or <code>hidden.bs.popover</code> event occurs). This is considered a "manual" triggering of the popover.</p>
{% highlight js %}$('#element').popover('toggle'){% endhighlight %}
<h4>.popover('destroy')</h4>
- <p>Hides and destroys an element's popover.</p>
+ <p>Popovers that use delegation (which are created using <a href="#popovers-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
{% highlight js %}$('#element').popover('destroy'){% endhighlight %}
+
<h3 id="popovers-events">Events</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 602373172..84370a7bf 100644
--- a/docs/_includes/js/scrollspy.html
+++ b/docs/_includes/js/scrollspy.html
@@ -106,12 +106,12 @@ $('[data-spy="scroll"]').each(function () {
<h3 id="scrollspy-options">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-offset=""</code>.</p>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
+ <th>Name</th>
+ <th>type</th>
+ <th>default</th>
<th>description</th>
</tr>
</thead>
@@ -131,7 +131,7 @@ $('[data-spy="scroll"]').each(function () {
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index ffb20345d..8622440fc 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -131,7 +131,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index fd6cc445d..48534ed3e 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -110,12 +110,12 @@ $('#example').tooltip(options)
<h3 id="tooltips-options">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>
<div class="table-responsive">
- <table class="table table-bordered table-striped">
+ <table class="table table-bordered table-striped js-options-table">
<thead>
<tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">Type</th>
- <th style="width: 50px;">Default</th>
+ <th>Name</th>
+ <th>Type</th>
+ <th>Default</th>
<th>Description</th>
</tr>
</thead>
@@ -213,19 +213,19 @@ $('#example').tooltip(options)
<p>Attaches a tooltip handler to an element collection.</p>
<h4>.tooltip('show')</h4>
- <p>Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.</p>
+ <p>Reveals an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown</strong> (i.e. before the <code>shown.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.</p>
{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
<h4>.tooltip('hide')</h4>
- <p>Hides an element's tooltip.</p>
+ <p>Hides an element's tooltip. <strong>Returns to the caller before the tooltip has actually been hidden</strong> (i.e. before the <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
<h4>.tooltip('toggle')</h4>
- <p>Toggles an element's tooltip.</p>
+ <p>Toggles an element's tooltip. <strong>Returns to the caller before the tooltip has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.tooltip</code> or <code>hidden.bs.tooltip</code> event occurs). This is considered a "manual" triggering of the tooltip.</p>
{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
<h4>.tooltip('destroy')</h4>
- <p>Hides and destroys an element's tooltip.</p>
+ <p>Tooltips that use delegation (which are created using <a href="#tooltips-options">the <code>selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
<h3 id="tooltips-events">Events</h3>
@@ -233,7 +233,7 @@ $('#example').tooltip(options)
<table class="table table-bordered table-striped bs-events-table">
<thead>
<tr>
- <th style="width: 150px;">Event Type</th>
+ <th>Event Type</th>
<th>Description</th>
</tr>
</thead>
generated by cgit v1.2.3 (git 2.25.1) at 2026-07-26 16:07:08 +0000