Bootstrap JS 提示框
JS 提示框 (tooltip.js)
Tooltip插件是一个小的弹出框，当用户将鼠标指针移到元素上时出现。
有关Tooltips的教程，请阅读我们的 Bootstrap Tooltip教程。
通过 data-*属性 触发
data-toggle="tooltip" 可以激活一个提示框。
锚的 title 即为提示工具（tooltip）的文本
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
测 试
通过 JavaScript 触发
提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
测 试
选项
有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：
| 名称 | 类型 | 默认值 | 描述 | 测 试 |
|---|---|---|---|---|
| animation | boolean | true |
提示工具使用 CSS 渐变滤镜效果
|
测 试 |
| container | string, or the boolean false | false | 将工具提示附加到特定元素。 Example: container: 'body' |
测 试 |
| delay | number, or object | 0 | 指定显示和隐藏所需的毫秒数 工具提示。 | 测 试 |
| html | boolean | false | 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text | 测 试 |
| placement | string | "top" | 规定如何定位提示工具（即 top|bottom|left|right|auto）
|
测 试 |
| selector | string, or the boolean false | false | 如果提供了一个选择器，提示工具对象将被委派到指定的目标 | 测 试 |
| template | string | 创建工具提示时要使用的基本HTML。 | ||
| title | string | "" | 如果未指定 title 属性，则 title 选项是默认的 title 值 | 测 试 |
| trigger | string | "hover focus" | 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。 Tip: To pass multiple values, separate them with a space | 测 试 |
| viewport | string, or object | {selector: "body", padding: 0} | 将工具提示保持在此元素的边界内。 |
方法
下面是一些提示工具（Tooltip）插件中有用的方法：
| 方法 | 描述 | 实例 |
|---|---|---|
| .tooltip(options) | 向元素集合附加提示工具句柄 | 测 试 |
| .tooltip("show") | 显示元素的提示工具 | 测 试 |
| .tooltip("hide") | 隐藏元素的提示工具 | 测 试 |
| .tooltip("toggle") | 切换显示/隐藏元素的提示工具 | 测 试 |
| .tooltip("destroy") | 隐藏并销毁元素的提示工具 | 测 试 |
事件
下面是一些提示工具（Tooltip）插件中有用的事件：
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tooltip | 当调用 show 实例方法时立即触发该事件 | 测 试 |
| shown.bs.tooltip | 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成） | 测 试 |
| hide.bs.tooltip | 当调用 hide 实例方法时立即触发该事件 | 测 试 |
| hidden.bs.tooltip | 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成） | 测 试 |
更多实例
自定义提示框
使用CSS自定义工具提示的外观：
Example
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
}
尝试一下 »
