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

1 files changed, 27 insertions, 35 deletions

diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index b8600d912..3bb3763d5 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -3,11 +3,30 @@ layout: page
 title: Tooltips
 ---
 
-## Examples
-
 Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
 
-Tooltips with zero-length titles are never displayed.
+## Overview
+
+Things to know when using the popover plugin:
+
+- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
+- Tooltips with zero-length titles are never displayed.
+- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
+- Triggering tooltips on hidden elements will not work.
+- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
+- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
+
+## Example: Enable popovers everywhere
+
+One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
+
+{% highlight js %}
+$(function () {
+  $('[data-toggle="tooltip"]').tooltip()
+})
+{% endhighlight %}
+
+## Examples
 
 Hover over the links below to see tooltips:
 
@@ -75,29 +94,6 @@ Hover over the buttons below to see their tooltips.
 </button>
 {% endhighlight %}
 
-<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 tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p>
-{% highlight js %}
-$(function () {
-  $('[data-toggle="tooltip"]').tooltip()
-})
-{% endhighlight %}
-</div>
-<div class="bd-callout bd-callout-warning">
-  <h4>Tooltips in button groups and input groups require special setting</h4>
-  <p>When using tooltips 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 tooltip is triggered).</p>
-</div>
-<div class="bd-callout bd-callout-warning">
-  <h4>Don't try to show tooltips on hidden elements</h4>
-  <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p>
-</div>
-<div class="bd-callout bd-callout-info">
-  <h4>Tooltips on disabled elements require wrapper elements</h4>
-  <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
-</div>
-
 ## Usage
 
 The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
@@ -112,11 +108,6 @@ $('#example').tooltip(options)
 
 The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
 
-<div class="bd-callout bd-callout-warning">
-  <h4>Multiple-line links</h4>
-  <p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
-</div>
-
 {% highlight html %}
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
@@ -228,10 +219,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 tooltips</h4>
-  <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
-</div>
+{% callout info %}
+#### Data attributes for individual tooltips
+
+Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.
+{% endcallout %}
 
 ### Methods