Redo all our callouts with the custom callout plugin

- Replaces manual use of .bd-callout with {% callout [type] %}
- Rearranged some callouts for proximity to others
- Turned long lists of callouts--like those on tooltips, plugings, etc--into a list because holy shit that's overwhelming

docs/components/popovers.md

@@ -3,42 +3,41 @@ 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="bd-callout bd-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="bd-callout bd-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="bd-callout bd-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="bd-callout bd-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="bd-callout bd-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>&lt;div&gt;</code> and apply the popover to that <code>&lt;div&gt;</code> instead.</p>
-</div>
-<div class="bd-callout bd-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.
 
@@ -79,13 +78,13 @@ 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 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="bd-example popover-demo">
   <div class="bd-example-popovers">
@@ -123,14 +122,15 @@ 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="bd-callout bd-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>&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>
+{% 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 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>
@@ -258,10 +258,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   </table>
 </div>
 
-<div class="bd-callout bd-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