Bootstrap JS Tooltip 插件
JS Tooltip (tooltip.js)
Tooltip 工具提示插件是一个小弹出框,当用户将鼠标指针移动到某个元素上时会出现。
学习更多的 Tooltip 的知识, 请访问本站的 Bootstrap 工具提示教程.
通过 data-* 属性
data-toggle="tooltip"
激活工具提示。
title
属性指定应显示在工具提示内的文本。
实例
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
通过 JavaScript
工具提示不仅仅是 CSS 插件,因此必须用 jQuery 初始化:选择指定的元素并调用 tooltip()
方法。
实例
// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified element
$('#myTooltip').tooltip();
Tooltip Options
Options 可以通过数据属性或 JavaScript 传递。对于数据属性,请将选项名称附加到 data-,如 data-placement=""。
名称 | 类型 | 默认 | 描述 | 试一试 |
---|---|---|---|---|
animation | boolean | true | 指定在显示和隐藏工具提示时是否添加CSS淡入淡出过渡效果
| 试一试 |
container | string 或 false | false | 将工具提示附加到特定元素 例如: container: 'body' | 试一试 |
delay | number, 或 object | 0 | 指定显示和隐藏工具提示所需的毫秒数 要指定显示延迟和隐藏延迟,请使用对象结构: delay: {show: 500, hide: 100} - 表示工具提示需要 500 毫秒,但隐藏它只需要 100 毫秒 | 试一试 |
html | boolean | false | 指定 tooltip 中是否可以使用 HTML 标记:
当设置为 false (默认), jQuery 的 text() 方法将会启用.如果您担心 XSS 攻击可以使用这个. | 试一试 |
placement | string | "top" | 指定 tooltip 的位置。值可以为:
| 试一试 |
selector | string 或 false | false | 将工具提示添加到指定的选择器 | 试一试 |
template | string | 创建工具提示时要使用的基础 HTML tooltip 的标题将插入到具有 .tooltip-inner 类的元素中,具有 .tooltip-arrow 类的元素将成为 tooltip 的箭头。 最外层的元素应该具有 .tooltip 类 | ||
title | string | "” | 指定应显示在 tooltip 内的文本 | 试一试 |
trigger | string | "hover focus" | 指定 tooltip 应该如何触发。 值可以为:
| 试一试 |
viewport | string 或 object | {selector: "body", padding: 0} | 将 tooltip 保持在此元素的范围内。 例如: viewport: '#viewport' 或 {selector: '#viewport', padding: 0} |
Tooltip 方法
下表列出了所有可用的 Tooltip 方法。
方法 | 描述 | 试一试 |
---|---|---|
.tooltip(options) | 使用选项激活工具提示。有关有效值,请参见上面的选项 | 试一试 |
.tooltip("show") | 显示 tooltip | 试一试 |
.tooltip("hide") | 隐藏 tooltip | 试一试 |
.tooltip("toggle") | 切换 tooltip | 试一试 |
.tooltip("destroy") | 隐藏与销毁 tooltip | 试一试 |
Tooltip 事件
下表列出了所有可用的 Tooltip 事件。
事件 | 描述 | 试一试 |
---|---|---|
show.bs.tooltip | 在即将显示工具提示时发生 | 试一试 |
shown.bs.tooltip | 在工具提示完全显示时发生(CSS 过渡完成后) | 试一试 |
hide.bs.tooltip | 在工具提示即将隐藏时发生 | 试一试 |
hidden.bs.tooltip | 在工具提示完全隐藏(CSS 过渡完成后)时发生 | 试一试 |
更多实例
自定义 Tooltip 设计
使用 CSS 自定义 tooltip 的外观:
实例
/* 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;
}