❮ Bootstrap Dropdown Plugin Bootstrap Helper Classes ❯

Bootstrap Tooltip Plugin

Tooltip plugins are very useful when you want to describe a link. Inspired by Jason Frame's jQuery.tipsy, the Tooltip plugin has made many improvements, such as no longer relying on images, using CSS for animation effects, and storing title information with data attributes.

tooltip.js. Alternatively, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or the compressed version bootstrap.min.js.

Usage

The Tooltip plugin generates content and markup as needed, by default placing tooltips after their trigger element. You can add tooltips in two ways:

Through data attributes: To add a tooltip, simply add data-toggle="tooltip" to an anchor tag. The anchor's title will be the text of the tooltip. By default, the plugin places the tooltip on the top.
```
<a href="#" data-toggle="tooltip" title="Example tooltip">Hover over me</a>
```
Through JavaScript: Trigger the tooltip via JavaScript:
```
$('#identifier').tooltip(options)
```

$(function () { $("[data-toggle='tooltip']").tooltip(); });

Example

The following example demonstrates the usage of the Tooltip plugin through data attributes.

Example

<h4>Tooltip Plugin - Anchors</h4>
This is a <a href="#" class="tooltip-test" data-toggle="tooltip"
        title="Default Tooltip">
    Default Tooltip
</a>.
This is a <a href="#" class="tooltip-test" data-toggle="tooltip"
        data-placement="left" title="Tooltip on left">
    Tooltip on left
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="top"
        title="Tooltip on top">
    Tooltip on top
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="bottom"
        title="Tooltip on bottom">
    Tooltip on bottom
</a>.
This is a <a href="#" data-toggle="tooltip" data-placement="right"
        title="Tooltip on right">
    Tooltip on right
</a>

<br>

<h4>Tooltip Plugin - Buttons</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        title="Default Tooltip">
    Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="left" title="Tooltip on left">
    Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="top" title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="bottom" title="Tooltip on bottom">
    Tooltip on bottom
</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"
        data-placement="right" title="Tooltip on the right">
    Tooltip on the right
</button>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

Result as follows:

Options

Some options are added via the Bootstrap Data API or called via JavaScript. The following table lists these options:

Option Name	Type/Default Value	Data Attribute Name	Description
animation	boolean <br> Default: true	data-animation	Tooltips use a CSS fade transition.
html	boolean <br> Default: false	data-html	Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placement	string	function <br> Default: top	data-placement	Specifies how to position the tooltip (i.e., 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 as left-aligned as possible, otherwise, it will display right-aligned.
selector	string <br> Default: false	data-selector	If a selector is provided, tooltip objects will be delegated to the specified targets.
title	string	function <br> Default: ''	data-title	If the title attribute is not specified, the title option is the default title value.
trigger	string <br> Default: 'hover focus'	data-trigger	Defines how the tooltip is triggered: click	hover	focus	manual. You can pass multiple triggers separated by spaces.
delay	number	object <br> Default: 0	data-delay	Delay showing and hiding the tooltip in milliseconds - does not apply to manual trigger type. If a number is supplied, delay is applied to both show and hide. Object structure is as follows: delay: <br>{ show: 500, hide: 100 }
container	string	false <br> Default: false	data-container	Appends the tooltip to a specified element. <br>Example: container: 'body'

Methods

Here are some useful methods in the Tooltip plugin:

Method	Description	Example
Options:.tooltip(options)	Attaches tooltip handlers to an element collection.	$().tooltip(options)
Toggle:.tooltip('toggle')	Toggles the visibility of the tooltip for an element.	$('#element').tooltip('toggle')
Show:.tooltip('show')	Reveals the tooltip for an element.	$('#element').tooltip('show')
Hide:.tooltip('hide')	Hides the tooltip for an element.	$('#element').tooltip('hide')
Destroy:.tooltip('destroy')	Hides and destroys the tooltip for an element.	$('#element').tooltip('destroy')

Example

The following example demonstrates the usage of Tooltip plugin methods.

Example

<div style="padding: 100px 100px 10px;">
    This is a <a href="#" class="tooltip-show" data-toggle="tooltip"
            title="show">Tooltip method show
    </a>.

This is a <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip method hide</a>.

This is a <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip method destroy</a>.

This is a <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip method toggle</a>.

<p class="tooltip-options"> This is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2</h2>">Tooltip method options</a>. </p>

❮ Bootstrap Dropdown Plugin Bootstrap Helper Classes ❯