rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

update tooltip docs

Browse Source
This commit is contained in:
Mark Otto 2013-12-15 11:41:46 -08:00
parent 61ec569211
commit 1264cb7140
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
javascript.html
View File

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