Bootstrap Tooltips

In this tutorial you will learn how to create tooltips with Bootstrap.

Creating the Tooltips With Bootstrap

A tooltip is a small pop up that appears when user places the mouse pointer over an element such as link or buttons to provide hint or information about the element being hovered.

Tooltips can be very helpful for the new visitors of your website because they enable the user to know the purpose of icons and links by placing the mouse pointer over them.

Step 1: Adding the Tooltip Markup

To create a tooltip, you need to add the data-toggle="tooltip" attribute to an element. Tolltip text that would display on hover can be specified using the title attribute.

Here is the standard markup for adding a tolltip to a hyperlink.

<a href="#" data-toggle="tooltip" title="Some text">Hover over me</a>

Similarly, you can add tooltips to the other elements such as buttons, icons, etc.

Note: For performance reasons the tooltip data-apis are opt in, means to use tooltips you must initialize them yourself with tooltip() method.

Step 2: Triggering the Tooltips

Tooltips can be triggered via JavaScript — just call the tooltip() Bootstrap method with the id, class or any CSS selector of the target element in your JavaScript code.

You can either initialize tooltips individually or all in one go. The following jQuery code will initialize all tooltips on a page by selecting them by their data-toggle attribute.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

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

```
});
```
```
</script>
```

— 上面示例的输出将如下所示：

Setting the Directions of Tooltips

You can set tooltips to appear on top, right, bottom and left sides of an element.

Positioning of Tooltips via Data Attributes

The following example will show you how to set the direction of tooltips via data attributes.

示例

Try this code »

<a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a>

<a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another tooltip</a>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="A large tooltip.">Large tooltip</a>

<a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last tooltip</a>

Positioning of Tooltips via JavaScript

The following example will show you how to set the direction of tooltips via JavaScript.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $(".tip-top").tooltip({placement : 'top'});

    $(".tip-right").tooltip({placement : 'right'});

    $(".tip-bottom").tooltip({placement : 'bottom'});

    $(".tip-left").tooltip({ placement : 'left'});

```
});
```
```
</script>
```

Options

There are certain options which may be passed to tooltip() Bootstrap method to customize the functionality of the tooltip plugin.

Name	类型	Default Value	说明
animation	boolean	true	Apply a CSS fade transition to the tooltip.
html	boolean	false	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	'top'	Sets the position of the tooltip — top \| bottom \| left \| right \| auto. When "auto" value is specified, it will dynamically reorient the tooltip. For example, if placement value is "auto top", the tooltip will display on the top when possible, otherwise it will display on the bottom.
selector	string	false	If a selector is provided, tooltip objects will be attached to the specified targets.
title	string \| function	''	Sets the default `title` value if title attribute isn't present.
trigger	string	'hover focus'	Specify how tooltip is triggered — click \| hover \| focus \| manual. Note you case pass trigger mutliple, space seperated, trigger types.
delay	number \| object	0	Time to delay in showing and hiding the tooltip (ms) — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { show: 500, hide: 100 }`
container	string \| false	false	Appends the tooltip to a specific element `container: 'body'`
template	string	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class `.tooltip-inner` and the element with the class `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class.
viewport	string \| object	`{ selector: 'body', padding: 0 }`	Keeps the tooltip within the bounds of this element. Example: `viewport: '#viewport'` or `{ selector: '#viewport', padding: 0 }`

You may set these options either through the use of data attributes or JavaScript. For setting the tooltips options via data attributes, just append the option name to data- along with the correct value, like data-animation="false", data-placement="bottom" etc.

However, JavaScript is the more preferable way for setting these options as it prevents you from repetitive work. See the tooltip's method $().tooltip(options) in the section below to know how to set the options for tooltips using the JavaScript.

Methods

These are the standard Bootstrap's tooltip methods:

This method attaches the tooltip handler to a group of elements. It also allows you to set the options for the tooltips, so that you can customize them according to your needs.

The following example will insert the specified text inside the tooltips if the value of the title attribute is omitted or missing from the selected elements:

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("#myTooltips a").tooltip({
```

        title: 'It works in absence of title attribute.'

```
    });
```
```
});
```
```
</script>
```

The following example will show you how to place the HTML content inside a tooltip:

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("#myTooltip").tooltip({
```

        title: "<h4><img src='images/smiley.png' alt='Smiley'> Hello, <b>I'm</b> <i>Smiley!</i></h4>",

```
        html: true
```
```
    }); 
```
```
});
```
```
</script>
```

The following example will show you how to control the timing of showing and hiding of the tooltip using the tooltip's delay option via JavaScript.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    // Showing and hiding tooltip with same speed

```
    $(".tooltip-tiny").tooltip({
```
```
        delay: 100
```
```
    });
```
```
    
```

    // Showing and hiding tooltip with different speed

```
    $(".tooltip-large").tooltip({
```
```
        delay: {show: 0, hide: 500}
```
```
    }); 
```
```
});
```
```
</script>
```

The following example will show you how you can create your own custom template for the Bootstrap tooltips instead of using the default one.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```
```
    $("#myTooltips a").tooltip({
```

        template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-head"><h3><span class="glyphicon glyphicon-info-sign"></span> Tool Info</h3></div><div class="tooltip-inner"></div></div>'

```
    });
```
```
});
```
```
</script>
```

The following example will insert the dynamically generated HTML code of the tooltip at the end of a .wrapper element instead of the <body> element.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    // Append tooltip HTML to wrapper element

    $("#myTooltips a").tooltip({container: ".wrapper"});

```
});
```
```
</script>
```

Note: Overriding the tooltip's default container option value does not produce any visible difference on the page. To see the actual result you need inspect the resulting DOM using the Firebug or Developer tools.

Similarly, you can set other options for the tooltips using the $().tooltip(options) method. Let's check out the other methods of the Bootstrap tooltip plugin.

.tooltip('show')

This method reveals an element's tooltip.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $(".show-tooltip").click(function(){

        $("#myTooltip").tooltip('show');

```
    }); 
```
```
});
```
```
</script>
```

.tooltip('hide')

This method hides an element's tooltip.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $(".hide-tooltip").click(function(){

        $("#myTooltip").tooltip('hide');

```
    }); 
```
```
});
```
```
</script>
```

.tooltip('toggle')

This method toggles an element's tooltip.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $(".toggle-tooltip").click(function(){

        $("#myTooltip").tooltip('toggle');

```
    }); 
```
```
});
```
```
</script>
```

.tooltip('destroy')

This method hides and destroys an element's tooltip.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $(".destroy-tooltip").click(function(){

        $("#myTooltip").tooltip('destroy');

```
    }); 
```
```
});
```
```
</script>
```

Events

Bootstrap's tooltip class includes few events for hooking into tooltip functionality.

事件	说明
show.bs.tooltip	This event fires immediately when the show instance method is called.
shown.bs.tooltip	This event is fired when the tooltip has been made visible to the user. It will wait until the CSS transition process has been fully completed before getting fired.
hide.bs.tooltip	This event is fired immediately when the hide instance method has been called.
hidden.bs.tooltip	This event is fired when the tooltip has finished being hidden from the user. It will wait until the CSS transition process has been fully completed before getting fired.
inserted.bs.tooltip	This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM.

The following example will display an alert message to the user when the fade out transition of the tooltip has been fully completed.

示例

Try this code »

```
<script type="text/javascript">
```
```
$(document).ready(function(){
```

    $('[data-toggle="tooltip"]').on('hidden.bs.tooltip', function(){

        alert("Tooltip has been completely closed.");

```
    });
```
```
});
```
```
</script>
```

Bootstrap Tooltips

Creating the Tooltips With Bootstrap

Step 1: Adding the Tooltip Markup

Step 2: Triggering the Tooltips

示例

Setting the Directions of Tooltips

Positioning of Tooltips via Data Attributes

示例

Positioning of Tooltips via JavaScript

示例

Options

Methods

$().tooltip(options)

示例

示例

示例

示例

示例

.tooltip('show')

示例

.tooltip('hide')

示例

.tooltip('toggle')

示例

.tooltip('destroy')

示例

Events

示例

关于我们

联系方式

互动工具