From 1264cb714057188c743fad416ffaef35bc0b9d2d Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sun, 15 Dec 2013 11:41:46 -0800
Subject: [PATCH] update tooltip docs

---
 javascript.html | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/javascript.html b/javascript.html
index b693eaaf9f..ee83242454 100644
--- a/javascript.html
+++ b/javascript.html
@@ -904,6 +904,12 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
         <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
       </div>
     </div><!-- /example -->
+{% highlight html %}
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+{% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">
       <h4>Opt-in functionality</h4>
@@ -926,9 +932,17 @@ $('#example').tooltip(options)
 {% endhighlight %}
 
     <h3>Markup</h3>
-    <p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
+    <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> 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 <code>top</code> by the plugin).</p>
+    <div class="bs-callout bs-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 linenos %}
-<div class="tooltip">
+<!-- HTML to write -->
+<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
+
+<!-- Generated markup by the plugin -->
+<div class="tooltip top">
   <div class="tooltip-inner">
     Tooltip!
   </div>
@@ -1011,11 +1025,6 @@ $('#example').tooltip(options)
       <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
     </div>
 
-    <h3>Markup</h3>
-{% highlight html %}
-<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
-{% endhighlight %}
-
     <h3>Methods</h3>
 
     <h4>$().tooltip(options)</h4>