feat(tooltip): add tooltip component

BREAKING CHANGE: (css class) `.with-tooltip` is now `.button-with-tooltip-wrapper`

BREAKING CHANGE: (javascript) tooltips must be explicitly initialized

[Finishes #80077170]

Signed-off-by: Bebe Peng <bpeng@pivotal.io>

src/pivotal-ui/components/tooltips.scss

@@ -1,4 +1,4 @@
-/*pending
+/*doc
 ---
 title: Tooltip
 name: tooltip
@@ -7,15 +7,69 @@ categories:
   - JavaScript
 ---
 
-Tooltip styles can be applied to any element. We often apply them to disabled
-buttons which require a wrapper div as the hover event will not fire.
+Tooltips are used to display extra information on hover. They can be used with any hoverable element.
 
-```haml_example
-.with-tooltip{data: {title: "This is your tooltip"}}
-  %button.btn.btn-primary{disabled: true} Button
+The `title` attribute defines the text that appears on the tooltip.
+The `data-placement` attribute defines the tooltip's placement.
+If `data-placement` is not specified, the tooltip is placed on top by default.
+
+<div class="alert alert-warning">
+  Tooltips must be initialized with javascript: <code>$(mySelector).tooltip();</code>
+</div>
+
+```html_example
+<p>
+  Check out this
+  <a id="link-with-tooltip-1" href="#" data-toggle="tooltip" data-placement="left" title="I should be on the left">
+    tooltip on the left!
+  </a>
+</p>
+
+<p>
+  Check out this
+  <a id="link-with-tooltip-2" href="#" data-toggle="tooltip" data-placement="right" title="I should be on the right">
+    tooltip on the right!
+  </a>
+</p>
+
+<p>
+  <button id="button-with-tooltip-1" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="I should be on the top">
+    Check out this tooltip on the top!
+  </button>
+</p>
+
+<p>
+  <button id="button-with-tooltip-2" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="I should be on the bottom">
+    Check out this tooltip on the bottom!
+  </button>
+</p>
+```
+
+```js_example
+$('#link-with-tooltip-1').tooltip();
+$('#link-with-tooltip-2').tooltip();
+$('#button-with-tooltip-1').tooltip();
+$('#button-with-tooltip-2').tooltip();
 ```
+
+<div class="alert alert-info">
+  If you want to use a tooltip on a disabled element, place the tooltip in a wrapper div with the class <code>.button-with-tooltip-wrapper</code>.
+</div>
+
+```html_example
+<div id="disabled-button-with-tooltip" class="button-with-tooltip-wrapper" data-toggle="tooltip" data-placement="right" title="This button is totally disabled!">
+  <button type="button" class="btn btn-default" disabled=true>
+    Disabled button
+  </button>
+</div>
+```
+
+```js_example
+$('#disabled-button-with-tooltip').tooltip();
+```
+
 */
 
-.with-tooltip {
+.button-with-tooltip-wrapper {
   display: inline-block;
 }