diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/carousel.md | 124 | ||||
| -rw-r--r-- | docs/components/collapse.md | 108 | ||||
| -rw-r--r-- | docs/components/modal.md | 128 | ||||
| -rw-r--r-- | docs/components/popovers.md | 266 | ||||
| -rw-r--r-- | docs/components/scrollspy.md | 69 | ||||
| -rw-r--r-- | docs/components/tooltips.md | 254 |
6 files changed, 463 insertions, 486 deletions
diff --git a/docs/components/carousel.md b/docs/components/carousel.md index 619ea780f..eac86ef81 100644 --- a/docs/components/carousel.md +++ b/docs/components/carousel.md @@ -184,50 +184,48 @@ $('.carousel').carousel() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>interval</td> - <td>number</td> - <td>5000</td> - <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> - </tr> - <tr> - <td>keyboard</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should react to keyboard events.</td> - </tr> - <tr> - <td>pause</td> - <td>string | null</td> - <td>"hover"</td> - <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td> - </tr> - <tr> - <td>ride</td> - <td>string</td> - <td>false</td> - <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> - </tr> - <tr> - <td>wrap</td> - <td>boolean</td> - <td>true</td> - <td>Whether the carousel should cycle continuously or have hard stops.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>interval</td> + <td>number</td> + <td>5000</td> + <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> + </tr> + <tr> + <td>keyboard</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should react to keyboard events.</td> + </tr> + <tr> + <td>pause</td> + <td>string | null</td> + <td>"hover"</td> + <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td> + </tr> + <tr> + <td>ride</td> + <td>string</td> + <td>false</td> + <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td> + </tr> + <tr> + <td>wrap</td> + <td>boolean</td> + <td>true</td> + <td>Whether the carousel should cycle continuously or have hard stops.</td> + </tr> + </tbody> +</table> ### Methods @@ -270,26 +268,24 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`). -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>slide.bs.carousel</td> - <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> - </tr> - <tr> - <td>slid.bs.carousel</td> - <td>This event is fired when the carousel has completed its slide transition.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>slide.bs.carousel</td> + <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td> + </tr> + <tr> + <td>slid.bs.carousel</td> + <td>This event is fired when the carousel has completed its slide transition.</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCarousel').on('slide.bs.carousel', function () { diff --git a/docs/components/collapse.md b/docs/components/collapse.md index e3172fa75..11017c234 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -124,32 +124,30 @@ $('.collapse').collapse() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>parent</td> - <td>selector</td> - <td>false</td> - <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td> - </tr> - <tr> - <td>toggle</td> - <td>boolean</td> - <td>true</td> - <td>Toggles the collapsible element on invocation</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>parent</td> + <td>selector</td> + <td>false</td> + <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td> + </tr> + <tr> + <td>toggle</td> + <td>boolean</td> + <td>true</td> + <td>Toggles the collapsible element on invocation</td> + </tr> + </tbody> +</table> ### Methods @@ -179,36 +177,34 @@ Hides a collapsible element. Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.collapse</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.collapse</td> - <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.collapse</td> - <td> - This event is fired immediately when the <code>hide</code> method has been called. - </td> - </tr> - <tr> - <td>hidden.bs.collapse</td> - <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.collapse</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.collapse</td> + <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.collapse</td> + <td> + This event is fired immediately when the <code>hide</code> method has been called. + </td> + </tr> + <tr> + <td>hidden.bs.collapse</td> + <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCollapsible').on('hidden.bs.collapse', function () { diff --git a/docs/components/modal.md b/docs/components/modal.md index b311ebf35..5ace1ac58 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -508,44 +508,42 @@ Call a modal with id `myModal` with a single line of JavaScript: Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>backdrop</td> - <td>boolean or the string <code>'static'</code></td> - <td>true</td> - <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> - </tr> - <tr> - <td>keyboard</td> - <td>boolean</td> - <td>true</td> - <td>Closes the modal when escape key is pressed</td> - </tr> - <tr> - <td>focus</td> - <td>boolean</td> - <td>true</td> - <td>Puts the focus on the modal when initialized.</td> - </tr> - <tr> - <td>show</td> - <td>boolean</td> - <td>true</td> - <td>Shows the modal when initialized.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>backdrop</td> + <td>boolean or the string <code>'static'</code></td> + <td>true</td> + <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td> + </tr> + <tr> + <td>keyboard</td> + <td>boolean</td> + <td>true</td> + <td>Closes the modal when escape key is pressed</td> + </tr> + <tr> + <td>focus</td> + <td>boolean</td> + <td>true</td> + <td>Puts the focus on the modal when initialized.</td> + </tr> + <tr> + <td>show</td> + <td>boolean</td> + <td>true</td> + <td>Shows the modal when initialized.</td> + </tr> + </tbody> +</table> ### Methods @@ -581,34 +579,32 @@ Manually hides a modal. **Returns to the caller before the modal has actually be Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`). -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.modal</td> - <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td>shown.bs.modal</td> - <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td>hide.bs.modal</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.modal</td> - <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.modal</td> + <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> + </tr> + <tr> + <td>shown.bs.modal</td> + <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> + </tr> + <tr> + <td>hide.bs.modal</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.modal</td> + <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myModal').on('hidden.bs.modal', function (e) { diff --git a/docs/components/popovers.md b/docs/components/popovers.md index 1cd96da49..e4ace2ed9 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -163,113 +163,111 @@ Enable popovers via JavaScript: Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -<div class="table-responsive"> - <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 popover</td> - </tr> - <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> - </td> - </tr> - <tr> - <td>content</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default content value if <code>data-content</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </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> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</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> - <p>How to position the popover - top | bottom | left | right.</p> - <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p> - </td> - </tr> - <tr> - <td>selector</td> - <td>string</td> - <td>false</td> - <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> - </tr> - <tr> - <td>template</td> - <td>string</td> - <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the popover.</p> - <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> - <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> - <p><code>.popover-arrow</code> will become the popover's arrow.</p> - <p>The outermost wrapper element should have the <code>.popover</code> class.</p> - </td> - </tr> - <tr> - <td>title</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </td> - </tr> - <tr> - <td>trigger</td> - <td>string</td> - <td>'click'</td> - <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> - </tr> - <tr> - <td>constraints</td> - <td>Array</td> - <td>'hover focus'</td> - <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> - </tr> - <tr> - <td>offset</td> - <td>string</td> - <td>'0 0'</td> - <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <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 popover</td> + </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>content</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> + </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> + <tr> + <td>html</td> + <td>boolean</td> + <td>false</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> + <p>How to position the popover - top | bottom | left | right.</p> + <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p> + </td> + </tr> + <tr> + <td>selector</td> + <td>string</td> + <td>false</td> + <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> + </tr> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the popover.</p> + <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> + <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> + <p><code>.popover-arrow</code> will become the popover's arrow.</p> + <p>The outermost wrapper element should have the <code>.popover</code> class.</p> + </td> + </tr> + <tr> + <td>title</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default title value if <code>title</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>trigger</td> + <td>string</td> + <td>'click'</td> + <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> + </tr> + <tr> + <td>constraints</td> + <td>Array</td> + <td>'hover focus'</td> + <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> + </tr> + <tr> + <td>offset</td> + <td>string</td> + <td>'0 0'</td> + <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td> + </tr> + </tbody> +</table> {% callout info %} #### Data attributes for individual popovers @@ -310,34 +308,32 @@ Hides and destroys an element's popover. Popovers that use delegation (which are ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.popover</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.popover</td> - <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.popover</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.popover</td> - <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.popover</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.popover</td> + <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.popover</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.popover</td> + <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myPopover').on('hidden.bs.popover', function () { diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md index 74829267e..a1f04ad9c 100644 --- a/docs/components/scrollspy.md +++ b/docs/components/scrollspy.md @@ -117,45 +117,42 @@ $('[data-spy="scroll"]').each(function () { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`. -<div class="table-responsive"> - <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>offset</td> - <td>number</td> - <td>10</td> - <td>Pixels to offset from top when calculating position of scroll.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <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>offset</td> + <td>number</td> + <td>10</td> + <td>Pixels to offset from top when calculating position of scroll.</td> + </tr> + </tbody> +</table> ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>activate.bs.scrollspy</td> - <td>This event fires whenever a new item becomes activated by the scrollspy.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>activate.bs.scrollspy</td> + <td>This event fires whenever a new item becomes activated by the scrollspy.</td> + </tr> + </tbody> +</table> + {% highlight js %} $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md index 31fb2c1c7..deb84b778 100644 --- a/docs/components/tooltips.md +++ b/docs/components/tooltips.md @@ -146,107 +146,105 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. -<div class="table-responsive"> - <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>container</td> - <td>string | element | false</td> - <td>false</td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> - </td> - </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>Delay showing and hiding the tooltip (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> - <tr> - <td>html</td> - <td>boolean</td> - <td>false</td> - <td> - <p>Allow HTML in the tooltip.</p> - <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p> - <p>Use text if you're worried about XSS attacks.</p> - </td> - </tr> - <tr> - <td>placement</td> - <td>string | function</td> - <td>'top'</td> - <td> - <p>How to position the tooltip - top | bottom | left | right.</p> - <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p> - </td> - </tr> - <tr> - <td>selector</td> - <td>string</td> - <td>false</td> - <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> - </tr> - <tr> - <td>template</td> - <td>string</td> - <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the tooltip.</p> - <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> - <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> - <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> - </td> - </tr> - <tr> - <td>title</td> - <td>string | element | function</td> - <td>''</td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p> - </td> - </tr> - <tr> - <td>trigger</td> - <td>string</td> - <td>'hover focus'</td> - <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> - </tr> - <tr> - <td>constraints</td> - <td>Array</td> - <td>[]</td> - <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> - </tr> - <tr> - <td>offset</td> - <td>string</td> - <td>'0 0'</td> - <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <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>container</td> + <td>string | element | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the tooltip (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> + <tr> + <td>html</td> + <td>boolean</td> + <td>false</td> + <td> + <p>Allow HTML in the tooltip.</p> + <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p> + <p>Use text if you're worried about XSS attacks.</p> + </td> + </tr> + <tr> + <td>placement</td> + <td>string | function</td> + <td>'top'</td> + <td> + <p>How to position the tooltip - top | bottom | left | right.</p> + <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p> + </td> + </tr> + <tr> + <td>selector</td> + <td>string</td> + <td>false</td> + <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td> + </tr> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the tooltip.</p> + <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> + <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> + <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> + </td> + </tr> + <tr> + <td>title</td> + <td>string | element | function</td> + <td>''</td> + <td> + <p>Default title value if <code>title</code> attribute isn't present.</p> + <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p> + </td> + </tr> + <tr> + <td>trigger</td> + <td>string</td> + <td>'hover focus'</td> + <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td> + </tr> + <tr> + <td>constraints</td> + <td>Array</td> + <td>[]</td> + <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td> + </tr> + <tr> + <td>offset</td> + <td>string</td> + <td>'0 0'</td> + <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td> + </tr> + </tbody> +</table> {% callout info %} #### Data attributes for individual tooltips @@ -286,34 +284,32 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are ### Events -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.tooltip</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.tooltip</td> - <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.tooltip</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.tooltip</td> - <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.tooltip</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.tooltip</td> + <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.tooltip</td> + <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> + </tr> + <tr> + <td>hidden.bs.tooltip</td> + <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myTooltip').on('hidden.bs.tooltip', function () { |