clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-24 03:57:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move all tooltip callouts into appropriate section

Browse Source 
Before, most callouts hierarchically came under Examples > Four
directions, which is not appropriate. Now they're under Markup
This commit is contained in:
Patrick H. Lauke 2015-03-23 22:06:22 +00:00
parent debcb1de59
commit 6c2548e031
1 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
docs/_includes/js/tooltips.html
View File

@ -68,6 +68,34 @@ $(function () {
{% endhighlight %}
</div>
<h2 id="tooltips-usage">Usage</h2>
<p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
<p>Trigger the tooltip via JavaScript:</p>
{% highlight js %}
$('#example').tooltip(options)
{% endhighlight %}
<h3>Markup</h3>
<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>
{% highlight html %}
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning" id="callout-tooltip-multiline">
<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>
<div class="bs-callout bs-callout-warning" id="callout-tooltip-groups">
<h4>Tooltips in button groups and input groups require special setting</h4>
<p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p>
@ -85,32 +113,6 @@ $(function () {
<p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code>&lt;div&gt;</code> and apply the tooltip to that <code>&lt;div&gt;</code> instead.</p>
</div>
<h2 id="tooltips-usage">Usage</h2>
<p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p>
<p>Trigger the tooltip via JavaScript:</p>
{% highlight js %}
$('#example').tooltip(options)
{% endhighlight %}
<h3>Markup</h3>
<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" id="callout-tooltip-multiline">
<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 %}
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
{% endhighlight %}
<h3 id="tooltips-options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
<div class="table-responsive">