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>
--
GitLab