引导程序（第 9 部分）|工具提示

在本文中，我们将讨论 bootstrap 提供的工具提示插件。工具提示对于显示网页中不同元素的描述非常有用。工具提示可以在网页中的任何元素上调用。
bootstrap 上的工具提示依赖于 3rd 方库Tether进行定位。

系绳库

因此，我们需要在bootstrap.js之前包含 tether.min.js

现在让我们看一个工具提示的例子。

工具提示示例

现在我们将检查生成上述工具提示的代码



    Hover Over me to see a tooltip

为了引入工具提示，我们向元素添加了 data-toggle 属性，我们需要使用 jQuery 初始化工具提示。

用于初始化工具提示的 jQuery 代码：

我们甚至可以根据我们的要求自定义此工具提示，让我们探索自定义工具提示的不同方式。

工具提示的放置：我们可以在元素的顶部、底部、左侧和右侧放置一个工具提示。
例子：
工具提示位置

上面例子的代码：

在上面的代码中，我们使用了data-placement属性来设置工具提示的位置，我们还使用了 bootstrap 网格系统提供的row和col 类

tootlip 中的 Html ：我们可以添加 html 作为 tootlip 的内容。
例子：

上面例子的代码：
```
    
```
在上面的代码中，我们使用了data-html属性来在工具提示中添加一个 html。
工具提示的偏移量：我们可以设置工具提示相对于目标的偏移量。
例子：

上面例子的代码：
```
    
```
在上面的代码中我们使用了data-offset属性来设置属性

注意：下面所有代码的输出都是非静态的，因此这里没有显示输出。

工具提示上的动画：
默认情况下，工具提示中会添加一个动画，即它淡入淡出，我们可以删除此动画。
```
    
```
在上面的代码中，我们使用了data-animation属性并将其设置为 false 以从工具提示中删除动画
延迟出现和消失：我们可以设置工具提示出现和消失的时间间隔。
我们可以通过两种方式设置延迟：
1. 我们为显示和隐藏设置了相同的延迟时间
```
    
```
  在上面的代码中，我们使用了data-delay属性来延迟分配给该属性的工具提示编号，以毫秒为单位，即工具提示将延迟 1000 毫秒。
2. 我们可以为工具提示的显示和隐藏添加不同的延迟时间间隔。
  html代码：
```
    
```
  html 代码没有变化。
  jQuery代码：
工具提示的触发：我们可以添加一个事件来触发工具提示，默认情况下，工具提示是在“悬停和焦点”上触发的，允许的各种事件是，点击，悬停，焦点和手动。
```
    
```
在上面的代码中，我们使用了data-trigger属性并将值设置为click ，这意味着当用户点击元素时，工具提示将出现