Bootstrap JS 工具提示
JS 工具提示
当用户将鼠标指针移到元素上时,会弹出一个小的弹出框,这就是工具提示。
要了解工具提示的教程,请阅读我们的 Bootstrap 工具提示教程。
通过 data-* 属性
data-toggle="tooltip"
激活工具提示。
title
属性指定了应在工具提示内显示的文本。
通过 JavaScript
工具提示不是纯 CSS 插件,因此必须使用 jQuery 进行初始化:选择指定元素并调用 tooltip()
方法。
示例
// 选择文档中所有具有 data-toggle="tooltips" 的元素
$('[data-toggle="tooltip"]').tooltip();
// 选择指定元素
$('#myTooltip').tooltip();
自己动手试一试 »
工具提示选项
选项可以通过数据属性或 JavaScript 传递。对于数据属性,将选项名称附加到 data-,例如 data-placement=""。
名称 | 类型 | 默认值 | 描述 | 试一试 |
---|---|---|---|---|
animation | boolean | true |
指定是否在显示和隐藏工具提示时添加 CSS 淡入淡出过渡效果
|
试一试 |
container | 字符串,或布尔值 false | false | 将工具提示附加到特定元素。 示例:container: 'body' |
试一试 |
delay | 数字,或对象 | 0 | 指定显示和隐藏工具提示的毫秒数。 要为显示和隐藏设置不同的延迟,请使用对象结构 delay: {show: 500, hide: 100} - 这将花费 500 毫秒显示工具提示,但只花费 100 毫秒隐藏它 |
试一试 |
html | boolean | false | 指定是否接受工具提示中的 HTML 标签
当设置为 false(默认)时,将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击,请使用此选项 |
试一试 |
placement | string | "top" | 指定工具提示的位置。可能的值
|
试一试 |
selector | 字符串,或布尔值 false | false | 将工具提示添加到指定的选择器 | 试一试 |
template | string | 创建工具提示时使用的基本 HTML。 工具提示的标题将插入到具有 .tooltip-inner 类的元素中,而具有 .tooltip-arrow 类的元素将成为工具提示的箭头。 最外层包装元素应具有 .tooltip 类。 |
||
title | string | "" | 指定应在工具提示内显示的文本 | 试一试 |
trigger | string | "hover focus" | 指定如何触发工具提示。可能的值
|
试一试 |
offset | 数字或字符串 | 0 | 工具提示相对于其目标元素的偏移量 | |
fallbackPlacement | 字符串或数组 | "flip" | 指定 Popper 将使用哪个位置作为后备 | |
boundary | 字符串或元素 | "scrollParent" | 工具提示的溢出约束边界。接受值 "viewport"、"window" 或 "scrollParent",或者一个 HTML 元素 |
工具提示方法
下表列出了所有可用的工具提示方法。
方法 | 描述 | 试一试 |
---|---|---|
.tooltip(options) | 使用选项激活工具提示。有关有效值,请参见上面的选项 | 试一试 |
.tooltip("show") | 显示工具提示 | 试一试 |
.tooltip("hide") | 隐藏工具提示 | 试一试 |
.tooltip("toggle") | 切换工具提示 | 试一试 |
.tooltip("dispose") | 隐藏并销毁工具提示 | 试一试 |
工具提示事件
下表列出了所有可用的工具提示事件。
事件 | 描述 | 试一试 |
---|---|---|
show.bs.tooltip | 工具提示即将显示时触发 | 试一试 |
shown.bs.tooltip | 工具提示完全显示后触发(在 CSS 过渡完成后) | 试一试 |
hide.bs.tooltip | 工具提示即将隐藏时触发 | 试一试 |
hidden.bs.tooltip | 工具提示完全隐藏后触发(在 CSS 过渡完成后) | 试一试 |