diff options
Diffstat (limited to 'docs/_includes/js/tooltips.html')
| -rw-r--r-- | docs/_includes/js/tooltips.html | 23 |
1 files changed, 11 insertions, 12 deletions
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html index 87893608b..ae553e0df 100644 --- a/docs/_includes/js/tooltips.html +++ b/docs/_includes/js/tooltips.html @@ -6,8 +6,7 @@ <h2 id="tooltips-examples">Examples</h2> <p>Hover over the links below to see tooltips:</p> <div class="bs-example tooltip-demo"> - <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. - </p> + <p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> </div><!-- /example --> <h3>Static tooltip</h3> @@ -58,7 +57,7 @@ <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"> + <div class="bs-callout bs-callout-danger" id="callout-tooltip-opt-in"> <h4>Opt-in functionality</h4> <p>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning <strong>you must initialize them yourself</strong>.</p> <p>One way to initialize all tooltips on a page would be to select them by their <code>data-toggle</code> attribute:</p> @@ -69,15 +68,15 @@ $(function () { {% endhighlight %} </div> - <div class="bs-callout bs-callout-warning"> + <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> </div> - <div class="bs-callout bs-callout-warning"> + <div class="bs-callout bs-callout-warning" id="callout-tooltip-hidden"> <h4>Don't try to show tooltips on hidden elements</h4> <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p> </div> - <div class="bs-callout bs-callout-info"> + <div class="bs-callout bs-callout-info" id="callout-tooltip-disabled"> <h4>Tooltips on disabled elements require wrapper elements</h4> <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p> </div> @@ -91,7 +90,7 @@ $('#example').tooltip(options) <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"> + <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> @@ -108,7 +107,7 @@ $('#example').tooltip(options) </div> {% endhighlight %} - <h3>Options</h3> + <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"> <table class="table table-bordered table-striped"> @@ -203,12 +202,12 @@ $('#example').tooltip(options) </tbody> </table> </div><!-- /.table-responsive --> - <div class="bs-callout bs-callout-info"> + <div class="bs-callout bs-callout-info" id="callout-tooltip-data"> <h4>Data attributes for individual tooltips</h4> <p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p> </div> - <h3>Methods</h3> + <h3 id="tooltips-methods">Methods</h3> <h4>$().tooltip(options)</h4> <p>Attaches a tooltip handler to an element collection.</p> @@ -229,9 +228,9 @@ $('#example').tooltip(options) <p>Hides and destroys an element's tooltip.</p> {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %} - <h3>Events</h3> + <h3 id="tooltips-events">Events</h3> <div class="table-responsive"> - <table class="table table-bordered table-striped"> + <table class="table table-bordered table-striped bs-events-table"> <thead> <tr> <th style="width: 150px;">Event Type</th> |