Bootstrap JS 工具提示

❮ 上一节 下一节 ❯

JS 工具提示

Tooltip 插件是当用户将鼠标指针移到元素上时出现的小弹出框。

有关工具提示的教程，请阅读我们的 Bootstrap 工具提示教程。

JS Tooltip

Tooltip 是一个小的弹出框，当用户将鼠标指针移到元素上时会出现。

有关工具提示的教程，请阅读我们的 Bootstrap 工具提示教程。

通过 data-* 属性

data-toggle="tooltip" 激活工具提示。

title 属性指定应该在工具提示中显示的文本。

实例

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

通过 JavaScript

工具提示不是纯 CSS 插件，因此必须使用 jQuery 进行初始化：选择指定元素并调用 tooltip() 方法。

实例

// 选择文档中所有带有 data-toggle="tooltips" 的元素
$('[data-toggle="tooltip"]').tooltip();

// 选择指定元素
$('#myTooltip').tooltip();

Tooltip 工具提示选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-placement="".

名称 类型 默认值 描述 试一试
animation boolean true

指定在显示和隐藏工具提示时是否添加 CSS 淡入淡出过渡效果

  • true - 添加淡入淡出效果
  • false - 不添加淡入淡出效果
container 字符串，或布尔值 false false 将工具提示附加到特定元素。
示例: container: 'body'
delay 数字或对象 0 指定显示和隐藏工具提示所需的毫秒数。

要指定显示延迟和隐藏延迟，请使用对象结构:

delay: {show: 500, hide: 100} - 显示工具提示需要 500 毫秒，但隐藏它只需 100 毫秒
html boolean  false 指定是否接受工具提示中的 HTML 标记:
 
  • true - 接受 HTML 标签
  • false - 不接受 HTML 标签
注释: HTML 必须插入到 title 属性中（或使用 title 选项）。

当设置为 false（默认）时，将使用 jQuery 的 text() 方法。如果您担心 XSS 攻击，请使用此选项
placement string "top" 指定工具提示位置。可能的值:

  • "top" - 顶部的工具提示
  • "bottom" - 底部的工具提示
  • "left" - 左侧的工具提示
  • "right" - 右侧的工具提示
  • "auto" - 让浏览器决定工具提示的位置。例如，如果值为 "auto left"，则工具提示将尽可能显示在左侧，否则显示在右侧。如果值为 "auto bottom"，则工具提示将尽可能显示在底部，否则显示在顶部
selector 字符串，或布尔值 false false 将工具提示添加到指定的选择器
template string   创建工具提示时要使用的基本 HTML。

工具提示的标题将插入到具有类 .tooltip-inner 的元素中，而具有类 .tooltip-arrow 的元素将成为工具提示的箭头。

最外层的包装元素应该有 .tooltip 类。
title string "" 指定应在工具提示内显示的文本
trigger string "hover focus" 指定如何触发工具提示。可能的值:

  • "click" - 通过单击触发工具提示
  • "hover" - 悬停时触发工具提示
  • "focus" - 获得焦点时触发工具提示（通过 TAB 制表符或单击等）
  • "manual" - 手动触发工具提示
提示: 要传递多个值，请用空格分隔它们
offset 数字或字符串 0 工具提示相对于其目标的偏移量
fallbackPlacement 字符串或数组 "flip" 指定 Popper 将在回退时使用的位置
boundary 字符串或元素 "scrollParent" 工具提示的溢出约束边界。 接受值"viewport"、"window"或"scrollParent"或 HTML 元素

Tooltip 工具提示方法

下表列出了所有可用的工具提示方法。

方法 描述 试一试
.tooltip(options) 使用选项激活工具提示。请参阅上面的选项以获取有效值
.tooltip("show") 显示工具提示
.tooltip("hide") 隐藏工具提示
.tooltip("toggle") 切换工具提示
.tooltip("dispose") 隐藏和销毁工具提示

Tooltip 工具提示事件

下表列出了所有可用的工具提示事件。

事件 描述 试一试
show.bs.tooltip 在即将显示工具提示时发生
shown.bs.tooltip 在工具提示完全显示时发生（在 CSS 转换完成后）
hide.bs.tooltip 在工具提示即将被隐藏时发生
hidden.bs.tooltip 在工具提示完全隐藏时发生（在 CSS 转换完成后）

❮ 上一节 下一节 ❯