diff options
| author | Mark Otto <[email protected]> | 2013-12-15 11:41:46 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-12-15 11:41:46 -0800 |
| commit | 1264cb714057188c743fad416ffaef35bc0b9d2d (patch) | |
| tree | 7c9c4759477cdf6a161d2be0e93a9f8c4f041dcb /javascript.html | |
| parent | 61ec569211d6e7b6fc8a93737f86ad8564f163eb (diff) | |
| download | bootstrap-1264cb714057188c743fad416ffaef35bc0b9d2d.tar.xz bootstrap-1264cb714057188c743fad416ffaef35bc0b9d2d.zip | |
update tooltip docs
Diffstat (limited to 'javascript.html')
| -rw-r--r-- | javascript.html | 23 |
1 files changed, 16 insertions, 7 deletions
diff --git a/javascript.html b/javascript.html index b693eaaf9..ee8324245 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> |