diff options
Diffstat (limited to 'docs/_includes/js/popovers.html')
| -rw-r--r-- | docs/_includes/js/popovers.html | 175 |
1 files changed, 63 insertions, 112 deletions
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html index 7bf515ad4..ef8e07941 100644 --- a/docs/_includes/js/popovers.html +++ b/docs/_includes/js/popovers.html @@ -16,6 +16,10 @@ <h4>Popovers in button groups and input groups require special setting</h4> <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't try to show popovers on hidden elements</h4> + <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p> + </div> <div class="bs-callout bs-callout-info"> <h4>Popovers on disabled elements require wrapper elements</h4> <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p> @@ -69,8 +73,8 @@ {% endhighlight %} <h4>Four directions</h4> - <div class="bs-example tooltip-demo"> - <div class="bs-example-tooltips"> + <div class="bs-example popover-demo"> + <div class="bs-example-popovers"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> @@ -105,12 +109,12 @@ sagittis lacus vel augue laoreet rutrum faucibus."> {% endhighlight %} <h4>Dismiss on next click</h4> - <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p> + <p>Use the <code>focus</code> trigger to dismiss popovers on the next click that the user makes.</p> <div class="bs-example" style="padding-bottom: 24px;"> - <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> + <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button> </div> {% highlight html %} -<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button> +<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button> {% endhighlight %} {% highlight js %} $('.popover-dismiss').popover({ @@ -135,9 +139,9 @@ $('.popover-dismiss').popover({ <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -145,7 +149,34 @@ $('.popover-dismiss').popover({ <td>animation</td> <td>boolean</td> <td>true</td> - <td>apply a CSS fade transition to the popover</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> @@ -157,50 +188,46 @@ $('.popover-dismiss').popover({ <td>placement</td> <td>string | function</td> <td>'right'</td> - <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</td> + <td>How to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.</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="http://jsfiddle.net/fScua/">an informative example</a>.</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>template</td> <td>string</td> - <td>'click'</td> - <td>how popover is triggered - click | hover | focus | manual</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> + <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> + <p><code>.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 | function</td> <td>''</td> - <td>default title value if <code>title</code> attribute isn't present</td> - </tr> - <tr> - <td>content</td> - <td>string | function</td> - <td>''</td> - <td>default content value if <code>data-content</code> attribute isn't present</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 --> @@ -263,79 +290,3 @@ $('#myPopover').on('hidden.bs.popover', function () { }) {% endhighlight %} </div> - - - -<!-- Alert -================================================== --> -<div class="bs-docs-section"> - <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1> - - <h2 id="alerts-examples">Example alerts</h2> - <p>Add dismiss functionality to all alert messages with this plugin.</p> - <div class="bs-example"> - <div class="alert alert-warning fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> - <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good. - </div> - </div><!-- /example --> - - <div class="bs-example"> - <div class="alert alert-danger fade in" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> - <h4>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> - <button type="button" class="btn btn-danger">Take this action</button> - <button type="button" class="btn btn-default">Or do this</button> - </p> - </div> - </div><!-- /example --> - - - <h2 id="alerts-usage">Usage</h2> - <p>Enable dismissal of an alert via JavaScript:</p> - {% highlight js %}$(".alert").alert(){% endhighlight %} - - <h3>Markup</h3> - <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> - {% highlight html %}<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{% endhighlight %} - - <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> - {% highlight js %}$(".alert").alert('close'){% endhighlight %} - - - <h3>Events</h3> - <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p> - <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>close.bs.alert</td> - <td>This event fires immediately when the <code>close</code> instance method is called.</td> - </tr> - <tr> - <td>closed.bs.alert</td> - <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> - </div><!-- /.table-responsive --> -{% highlight js %} -$('#my-alert').bind('closed.bs.alert', function () { - // do something… -}) -{% endhighlight %} -</div> |