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;
}
尝试一下 »