Inspired by the excellent Tipsy jQuery 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.
- Tooltips rely on the 3rd party library [Tether](http://tether.io/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for tooltips to work!
- Tooltips are opt-in for performance reasons, so **you must initialize them yourself**.
- Tooltips with zero-length titles are never displayed.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
- Triggering tooltips on hidden elements will not work.
- Tooltips for `.disabled` or `disabled` elements must be triggered on a wrapper element.
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use `white-space: nowrap;` on your `<a>`s to avoid this behavior.
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).
#### Making tooltips work for keyboard and assistive technology users
You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users. In addition, most assistive technologies currently do not announce the tooltip in this situation.
<td>Apply a CSS fade transition to the tooltip</td>
</tr>
<tr>
<td>container</td>
<td>string | element | false</td>
<td>false</td>
<td>
<p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element -which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
<p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
<p>Use text if you're worried about XSS attacks.</p>
</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
<td>
<p>How to position the tooltip - top | bottom | left | right.</p>
<p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
<td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <ahref="https://github.com/twbs/bootstrap/issues/4215">this</a> and <ahref="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
<p>Base HTML to use when creating the tooltip.</p>
<p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
<p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
<p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
</td>
</tr>
<tr>
<td>title</td>
<td>string | element | function</td>
<td>''</td>
<td>
<p>Default title value if <code>title</code> attribute isn't present.</p>
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
</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. `manual` cannot be combined with any other trigger.</td>
</tr>
<tr>
<td>constraints</td>
<td>Array</td>
<td>[]</td>
<td>An array of constraints - passed through to Tether. For more information refer to Tether's <ahref="http://tether.io/#constraints">constraint docs</a>.</td>
Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
Hides and destroys an element's tooltip. Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
