Bootstrap JS 工具提示
JS 工具提示
工具提示是一个小型弹出框，当用户将鼠标指针悬停在元素上时出现。
有关工具提示的教程，请阅读我们的 Bootstrap 工具提示教程。
通过 data-* 属性
data-toggle="tooltip" 激活工具提示。
title 属性指定应在工具提示内显示的文本。
通过 JavaScript
工具提示不是纯 CSS 插件，因此必须使用 jQuery 初始化：选择指定的元素并调用 tooltip() 方法。
示例
// 选择文档中所有具有 data-toggle="tooltips" 属性的元素
$('[data-toggle="tooltip"]').tooltip();
// 选择指定的元素
$('#myTooltip').tooltip();
亲自尝试 »
工具提示选项
选项可以通过 data 属性或 JavaScript 传递。对于 data 属性，将选项名称附加到 data-，例如 data-placement=""。
| 名称 | 类型 | 默认值 | 描述 | 尝试 |
|---|---|---|---|---|
| animation | 布尔值 | true |
指定在显示和隐藏工具提示时是否添加 CSS 淡入淡出过渡效果
|
尝试 |
| container | 字符串或布尔值 false | false | 将工具提示附加到特定元素。 示例：container: 'body' |
尝试 |
| delay | 数字或对象 | 0 | 指定显示和隐藏工具提示所需的时间（毫秒）。 要为显示和隐藏指定不同的延迟，请使用对象结构 delay: {show: 500, hide: 100} - 显示工具提示需要 500 毫秒，但隐藏只需 100 毫秒 |
尝试 |
| html | 布尔值 | false | 指定是否接受工具提示中的 HTML 标签
当设置为 false（默认）时，将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击，请使用此方法 |
尝试 |
| placement | 字符串 | "top" | 指定工具提示的位置。可能的取值
|
尝试 |
| selector | 字符串或布尔值 false | false | 将工具提示添加到指定的选择器 | 尝试 |
| template | 字符串 | 创建工具提示时使用的基本 HTML。 工具提示的标题将插入具有类 .tooltip-inner 的元素中，而具有类 .tooltip-arrow 的元素将成为工具提示的箭头。 最外层的包装元素应具有 .tooltip 类。 |
||
| title | 字符串 | "" | 指定应在工具提示内显示的文本 | 尝试 |
| trigger | 字符串 | "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 过渡完成后） | 尝试 |
