diff options
Diffstat (limited to 'docs/components/popovers.md')
| -rw-r--r-- | docs/components/popovers.md | 89 |
1 files changed, 45 insertions, 44 deletions
diff --git a/docs/components/popovers.md b/docs/components/popovers.md index e1e2c9664..478e75f0b 100644 --- a/docs/components/popovers.md +++ b/docs/components/popovers.md @@ -3,46 +3,45 @@ layout: page title: Popovers --- -Add small overlays of content, like those on the iPad, to any element for housing secondary information. +Add small overlays of content, like those found in iOS, to any element for housing secondary information. -Popovers whose both title and content are zero-length are never displayed. +## Overview + +Things to know when using the popover plugin: + +- Popovers require the [tooltip plugin](/components/tooltips) as a dependency. +- Popovers are opt-in for performance reasons, so **you must initialize them yourself**. +- Zero-length `title` and `content` values will never show a popover. +- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). +- Triggering popovers on hidden elements will not work. +- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element. +- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior. + +## Example: Enable popovers everywhere + +One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute: -<div class="bs-callout bs-callout-danger"> - <h4>Plugin dependency</h4> - <p>Popovers require the <a href="#tooltips">tooltip plugin</a> to be included in your version of Bootstrap.</p> -</div> -<div class="bs-callout bs-callout-danger"> - <h4>Opt-in functionality</h4> - <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> - <p>One way to initialize all popovers on a page would be to select them by their <code>data-toggle</code> attribute:</p> {% highlight js %} $(function () { $('[data-toggle="popover"]').popover() }) {% endhighlight %} -</div> -<div class="bs-callout bs-callout-warning"> - <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> -</div> -<div class="bs-callout bs-callout-info"> - <h4>Multiple-line links</h4> - <p>Sometimes you want to add a popover to a hyperlink that wraps multiple lines. The default behavior of the popover plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p> -</div> -### Static popover +## Example: Using the `container` option + +{% highlight js %} +$(function () { + $('.example-popover').popover( + container: 'body' + ) +}) +{% endhighlight %} + +## Static popover Four options are available: top, right, bottom, and left aligned. -<div class="bs-example bs-example-popover"> +<div class="bd-example bd-example-popover"> <div class="popover popover-top"> <div class="popover-arrow"></div> <h3 class="popover-title">Popover top</h3> @@ -79,16 +78,16 @@ Four options are available: top, right, bottom, and left aligned. <div class="clearfix"></div> </div> -### Live demo +## Live demo {% example html %} -<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> +<button type="button" class="btn btn-lg btn-danger bd-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> {% endexample %} -#### Four directions +### Four directions -<div class="bs-example popover-demo"> - <div class="bs-example-popovers"> +<div class="bd-example popover-demo"> + <div class="bd-example-popovers"> <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> @@ -123,17 +122,18 @@ sagittis lacus vel augue laoreet rutrum faucibus."> </button> {% endhighlight %} -#### Dismiss on next click +### Dismiss on next click Use the `focus` trigger to dismiss popovers on the next click that the user makes. -<div class="bs-callout bs-callout-danger"> - <h4>Specific markup required for dismiss-on-next-click</h4> - <p>For proper cross-browser and cross-platform behavior, you must use the <code><a></code> tag, <i>not</i> the <code><button></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> +{% callout danger %} +#### Specific markup required for dismiss-on-next-click + +For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) attribute. +{% endcallout %} {% example html %} -<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> +<a tabindex="0" class="btn btn-lg btn-danger bd-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> {% endexample %} {% highlight js %} @@ -258,10 +258,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap </table> </div> -<div class="bs-callout bs-callout-info"> - <h4>Data attributes for individual popovers</h4> - <p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p> -</div> +{% callout info %} +#### Data attributes for individual popovers + +Options for individual popovers can alternatively be specified through the use of data attributes, as explained above. +{% endcallout %} ### Methods |