mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
mardownify js tooltips
This commit is contained in:
Mark Otto
parent
c6aae570b1
commit
b1dc638458
@ -3,66 +3,81 @@ layout: page
|
||||
title: Tooltips
|
||||
---
|
||||
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="tooltips" class="page-header">Tooltips <small>tooltip.js</small></h1>
|
||||
## Examples
|
||||
|
||||
<h2 id="tooltips-examples">Examples</h2>
|
||||
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.</p>
|
||||
<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.
|
||||
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
|
||||
|
||||
Hover over the links below to see tooltips:
|
||||
|
||||
<div class="bs-example tooltip-demo">
|
||||
<p class="muted">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 -->
|
||||
</div>
|
||||
|
||||
<h3>Four directions</h3>
|
||||
<div class="bs-example tooltip-demo">
|
||||
### Directions
|
||||
|
||||
Available in four directions
|
||||
|
||||
<div class="bs-example tooltip-demo">
|
||||
<div class="bs-example-tooltips">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" 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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
</div>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<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>
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<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>
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
## Usage
|
||||
|
||||
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
|
||||
|
||||
Trigger the tooltip via JavaScript:
|
||||
|
||||
<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">
|
||||
### Markup
|
||||
|
||||
The required markup for a tooltip is only a `data` attribute and `title` 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 `top` by the plugin).
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- HTML to write -->
|
||||
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
|
||||
@ -76,9 +91,11 @@ $('#example').tooltip(options)
|
||||
</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">
|
||||
### Options
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -164,35 +181,46 @@ $('#example').tooltip(options)
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
<div class="bs-callout bs-callout-info">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<h3>Methods</h3>
|
||||
### Methods
|
||||
|
||||
<h4>$().tooltip(options)</h4>
|
||||
<p>Attaches a tooltip handler to an element collection.</p>
|
||||
#### $().tooltip(options)
|
||||
|
||||
<h4>.tooltip('show')</h4>
|
||||
<p>Reveals an element's tooltip.</p>
|
||||
{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
|
||||
Attaches a tooltip handler to an element collection.
|
||||
|
||||
<h4>.tooltip('hide')</h4>
|
||||
<p>Hides an element's tooltip.</p>
|
||||
{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
|
||||
#### .tooltip('show')
|
||||
|
||||
<h4>.tooltip('toggle')</h4>
|
||||
<p>Toggles an element's tooltip.</p>
|
||||
{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
|
||||
Reveals an element's tooltip.
|
||||
|
||||
<h4>.tooltip('destroy')</h4>
|
||||
<p>Hides and destroys an element's tooltip.</p>
|
||||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||
{% highlight js %}$('#element').tooltip('show'){% endhighlight %}
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="table-responsive">
|
||||
#### .tooltip('hide')
|
||||
|
||||
Hides an element's tooltip.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('hide'){% endhighlight %}
|
||||
|
||||
#### .tooltip('toggle')
|
||||
|
||||
Toggles an element's tooltip.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('toggle'){% endhighlight %}
|
||||
|
||||
#### .tooltip('destroy')
|
||||
|
||||
Hides and destroys an element's tooltip.
|
||||
|
||||
{% highlight js %}$('#element').tooltip('destroy'){% endhighlight %}
|
||||
|
||||
### Events
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -219,10 +247,10 @@ $('#example').tooltip(options)
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div><!-- /.table-responsive -->
|
||||
</div>
|
||||
|
||||
{% highlight js %}
|
||||
$('#myTooltip').on('hidden.bs.tooltip', function () {
|
||||
// do something…
|
||||
})
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user