diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index b2f58fbc4810d98eb6eb27b737ec77a8246f7225..2ee67074159fff5ff0daf7069971cc06a02ddeec 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -151,6 +151,33 @@ $('.popover-dismiss').popover({ <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 | 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 1 argument, which is 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> @@ -169,22 +196,10 @@ $('.popover-dismiss').popover({ <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="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> - <tr> - <td>trigger</td> - <td>string</td> - <td>'click'</td> - <td>How popover is triggered - click | hover | focus | manual</td> - </tr> - <tr> - <td>title</td> - <td>string | function</td> - <td>''</td> - <td>Default title value if <code>title</code> attribute isn't present</td> - </tr> <tr> <td>template</td> <td>string</td> - <td><code>'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td><code>'<div class="popover" role="tooltip"><div class="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> @@ -194,32 +209,25 @@ $('.popover-dismiss').popover({ </td> </tr> <tr> - <td>content</td> + <td>title</td> <td>string | 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 1 argument, which is the element that the popover is attached to.</p> - </td> + <td>Default title value if <code>title</code> 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> + <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.</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> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> + <td> + <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p> + </td> + </tr> </tbody> </table> </div><!-- /.table-responsive --> diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 64ea06e85e00d98fe33146a070ffbe231de7f652..e967878f86e80225063f13770fb99cb6553c2def 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -90,6 +90,24 @@ $('#example').tooltip(options) <td>true</td> <td>Apply a CSS fade transition to the tooltip</td> </tr> + <tr> + <td>container</td> + <td>string | 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> @@ -106,7 +124,7 @@ $('#example').tooltip(options) <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> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> <tr> <td>template</td> @@ -131,24 +149,6 @@ $('#example').tooltip(options) <td>'hover focus'</td> <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</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>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p> - </td> - </tr> <tr> <td>viewport</td> <td>string | object</td>