</div>
{% endhighlight %}
- <h3>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">
- <thead>
- <tr>
- <th style="width: 100px;">Name</th>
- <th style="width: 100px;">type</th>
- <th style="width: 50px;">default</th>
- <th>description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>animation</td>
- <td>boolean</td>
- <td>true</td>
- <td>apply a CSS fade transition to the tooltip</td>
- </tr>
- <tr>
- <td>html</td>
- <td>boolean</td>
- <td>false</td>
- <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
- </tr>
- <tr>
- <td>placement</td>
- <td>string | function</td>
- <td>'top'</td>
- <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
- </tr>
- <tr>
- <td>selector</td>
- <td>string</td>
- <td>false</td>
- <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
- </tr>
- <tr>
- <td>title</td>
- <td>string | function</td>
- <td>''</td>
- <td>default title value if <code>title</code> attribute isn't present</td>
- </tr>
- <tr>
- <td>trigger</td>
- <td>string</td>
- <td>'hover focus'</td>
- <td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
- </tr>
- <tr>
- <td>delay</td>
- <td>number | object</td>
- <td>0</td>
- <td>
- <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
- <p>If a number is supplied, delay is applied to both hide/show</p>
- <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
- </td>
- </tr>
- <tr>
- <td>container</td>
- <td>string | false</td>
- <td>false</td>
- <td>
- <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
- </td>
- </tr>
- <tr>
- <td>viewport</td>
- <td>string</td>
- <td>'body'</td>
- <td>
- <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code></p>
- </td>
- </tr>
- <tr>
- <td>viewportPadding</td>
- <td>number</td>
- <td>0</td>
- <td>
- <p>Pixel distance to keep the tooltip from the edges of the viewport element. Example: <code>viewportPadding: 10</code></p>
- </td>
- </tr>
- </tbody>
- </table>
- </div><!-- /.table-responsive -->
- <div class="bs-callout bs-callout-info">
- <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>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">
+ <thead>
+ <tr>
+ <th style="width: 100px;">Name</th>
+ <th style="width: 100px;">type</th>
+ <th style="width: 50px;">default</th>
+ <th>description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>animation</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>apply a CSS fade transition to the tooltip</td>
+ </tr>
+ <tr>
+ <td>html</td>
+ <td>boolean</td>
+ <td>false</td>
+ <td>Insert HTML into the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+ </tr>
+ <tr>
+ <td>placement</td>
+ <td>string | function</td>
+ <td>'top'</td>
+ <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
+ </tr>
+ <tr>
+ <td>selector</td>
+ <td>string</td>
+ <td>false</td>
+ <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
+ </tr>
+ <tr>
+ <td>title</td>
+ <td>string | function</td>
+ <td>''</td>
+ <td>default title value if <code>title</code> attribute isn't present</td>
+ </tr>
+ <tr>
+ <td>trigger</td>
+ <td>string</td>
+ <td>'hover focus'</td>
+ <td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ </tr>
+ <tr>
+ <td>delay</td>
+ <td>number | object</td>
+ <td>0</td>
+ <td>
+ <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+ <p>If a number is supplied, delay is applied to both hide/show</p>
+ <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+ </td>
+ </tr>
+ <tr>
+ <td>container</td>
+ <td>string | false</td>
+ <td>false</td>
+ <td>
+ <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
+ </td>
+ </tr>
++ <tr>
++ <td>viewport</td>
++ <td>string</td>
++ <td>'body'</td>
++ <td>
++ <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code></p>
++ </td>
++ </tr>
++ <tr>
++ <td>viewportPadding</td>
++ <td>number</td>
++ <td>0</td>
++ <td>
++ <p>Pixel distance to keep the tooltip from the edges of the viewport element. Example: <code>viewportPadding: 10</code></p>
++ </td>
++ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
+ <div class="bs-callout bs-callout-info">
+ <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>
-
- <h4>$().tooltip(options)</h4>
-
<p>Attaches a tooltip handler to an element collection.</p>
-
- <h4>.tooltip('show')</h4>
-
<p>Reveals an element's tooltip.</p>
- {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
-
- <h4>.tooltip('hide')</h4>
-
<p>Hides an element's tooltip.</p>
- {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
-
- <h4>.tooltip('toggle')</h4>
-
<p>Toggles an element's tooltip.</p>
- {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
-
- <h4>.tooltip('destroy')</h4>
-
<p>Hides and destroys an element's tooltip.</p>
- {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
-
- <h3>Events</h3>
-
<div class="table-responsive">
-
<table class="table table-bordered table-striped">
- <thead>
- <tr>
- <th style="width: 150px;">Event Type</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>show.bs.tooltip</td>
- <td>This event fires immediately when the <code>show</code> instance method is called.</td>
- </tr>
- <tr>
- <td>shown.bs.tooltip</td>
- <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
- </tr>
- <tr>
- <td>hide.bs.tooltip</td>
- <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
- </tr>
- <tr>
- <td>hidden.bs.tooltip</td>
- <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
- </tr>
- </tbody>
- </table>
- </div><!-- /.table-responsive -->
+ <h3>Methods</h3>
+
+ <h4>$().tooltip(options)</h4>
+ <p>Attaches a tooltip handler to an element collection.</p>
+
+ <h4>.tooltip('show')</h4>
+ <p>Reveals an element's tooltip.</p>
+ {% highlight js %}$('#element').tooltip('show'){% endhighlight %}
+
+ <h4>.tooltip('hide')</h4>
+ <p>Hides an element's tooltip.</p>
+ {% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
+
+ <h4>.tooltip('toggle')</h4>
+ <p>Toggles an element's tooltip.</p>
+ {% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
+
+ <h4>.tooltip('destroy')</h4>
+ <p>Hides and destroys an element's tooltip.</p>
+ {% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
+
+ <h3>Events</h3>
+ <div class="table-responsive">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.tooltip</td>
+ <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.tooltip</td>
+ <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.tooltip</td>
+ <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.tooltip</td>
+ <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.table-responsive -->
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something…
.tooltip('show'),
tooltip = container.find('.tooltip')
- ok( Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2)) === Math.round(tooltip.offset().top) )
+ // this is some dumb hack shit because sub pixels in firefox
+ var top = Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2))
+ var top2 = Math.round(tooltip.offset().top)
+ var topDiff = top - top2
+ ok(topDiff <= 1 && topDiff >= -1)
target.tooltip('hide')
+ $('head #test').remove()
+ })
+
+ test('should adjust the tip\'s top when up against the top of the viewport', function () {
+ $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+ var container = $('<div />').appendTo('body'),
+ target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
+ .appendTo(container)
+ .tooltip({placement: 'right', viewportPadding: 12})
+ .tooltip('show'),
+ tooltip = container.find('.tooltip')
+
+ ok( Math.round(tooltip.offset().top) === 12 )
+ target.tooltip('hide')
+ $('head #test').remove()
+ })
+
+ test('should adjust the tip\'s top when up against the bottom of the viewport', function () {
+ $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+ var container = $('<div />').appendTo('body'),
+ target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; bottom: 0px; left: 0px;"></a>')
+ .appendTo(container)
+ .tooltip({placement: 'right', viewportPadding: 12})
+ .tooltip('show'),
+ tooltip = container.find('.tooltip')
+
+ ok( Math.round(tooltip.offset().top) === Math.round($(window).height() - 12 - tooltip[0].offsetHeight) )
+ target.tooltip('hide')
+ $('head #test').remove()
+ })
+
+ test('should adjust the tip\'s left when up against the left of the viewport', function () {
+ $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+ var container = $('<div />').appendTo('body'),
+ target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; left: 0px;"></a>')
+ .appendTo(container)
+ .tooltip({placement: 'bottom', viewportPadding: 12})
+ .tooltip('show'),
+ tooltip = container.find('.tooltip')
+
+ ok( Math.round(tooltip.offset().left) === 12 )
+ target.tooltip('hide')
+ $('head #test').remove()
+ })
+
+ test('should adjust the tip\'s left when up against the right of the viewport', function () {
+ $('head').append('<style id="test"> .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; } </style>')
+
+ var container = $('<div />').appendTo('body'),
+ target = $('<a href="#" rel="tooltip" title="tip" style="position: fixed; top: 0px; right: 0px;"></a>')
+ .appendTo(container)
+ .tooltip({placement: 'bottom', viewportPadding: 12})
+ .tooltip('show'),
+ tooltip = container.find('.tooltip')
+
+ ok( Math.round(tooltip.offset().left) === Math.round($(window).width() - 12 - tooltip[0].offsetWidth) )
+ target.tooltip('hide')
+ $('head #test').remove()
})
test('tooltip title test #1', function () {
projects / thirdparty / bootstrap.git / commitdiff
