JS工具提示(tooltip.js)
该工具提示插件是小的弹出框，当用户在一个元素上移动鼠标指针出现。
对于有关工具提示教程，请阅读我们的Bootstrap Tooltip教程 。
通过data-*属性
该data-toggle="tooltip"激活提示。
该title属性指定应提示里面显示的文本。
通过JavaScript
提示不仅是CSS-插件，因此必须用jQuery初始化：选择指定的元素，并调用tooltip()方法。
例
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
试一试» 提示选项
选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到data-在data-placement=""
| 名称 | 类型 | 默认 | 描述 | 尝试一下 |
|---|---|---|---|---|
| animation | boolean | true | 指定是否添加CSS淡入淡出过渡效果显示和隐藏工具提示时，
| 尝试一下 |
| 容器 | 字符串或布尔值false | 假 | 追加工具提示特定元素。 例如：容器： 'body' | 尝试一下 |
| delay | number, or object | 0 | 指定毫秒它会显示和隐藏工具提示的数量。 来指定用于显示的延迟和另一个用于隐藏，使用对象结构： delay: {show: 500, hide: 100} -这将需要500毫秒，以显示tooltip ，但只有100毫秒来隐藏它 | 尝试一下 |
| html | boolean | false | 指定是否接受HTML标签的提示：
当设置为false（默认）， jQuery's text()将被使用的方法。 如果你担心XSS攻击使用此 | 尝试一下 |
| placement | string | "top" | 指定提示的位置。 可能的值：
| 尝试一下 |
| selector | string, or the boolean false | false | 添加工具提示到指定的选择 | 尝试一下 |
| template | string | 基本HTML创建工具提示时使用。 工具提示的标题将被插入到具有所述类元素.tooltip-inner并与类元素.tooltip-arrow将成为工具提示的箭头。 最外层的包装元素应该有.tooltip类。 | ||
| title | string | "" | 指定应工具提示内显示的文本 | 尝试一下 |
| trigger | string | "hover focus" | 指定提示是如何触发。 可能的值：
| 尝试一下 |
| viewport | string, or object | {selector: "body", padding: 0} | 保持此元素的边界内的提示。 例如： viewport: '#viewport'或{selector: '#viewport', padding: 0} |
提示方法
下表列出了所有可用的工具提示方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .tooltip( options ) | 激活与选项的提示。 见上面的有效值选项 | 尝试一下 |
| .tooltip("show") | 显示工具提示 | 尝试一下 |
| .tooltip("hide") | 隐藏工具提示 | 尝试一下 |
| .tooltip("toggle") | 切换工具提示 | 尝试一下 |
| .tooltip("destroy") | 隐藏并销毁工具提示 | 尝试一下 |
提示活动
下表列出了所有可用的工具提示的事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| show.bs.tooltip | 当工具提示将要示出发生 | 尝试一下 |
| shown.bs.tooltip | 发生时，尽显提示（后CSS过渡已经完成） | 尝试一下 |
| hide.bs.tooltip | 当提示即将发生隐患 | 尝试一下 |
| hidden.bs.tooltip | 当提示完全隐藏时（后CSS过渡已经完成） | 尝试一下 |
例子
定制设计工具提示
使用CSS自定义工具提示的外观：
例
/* 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;
} 试一试»