HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Bootstrap JS 工具提示参考

JS 工具提示 (tooltip.js)

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" - 手动触发工具提示
提示: 要传递多个值，请用空格分隔它们		 测试一下
viewport 字符串或对象 {selector: "body", padding: 0} 将工具提示保持在此元素的范围内。

示例: viewport: '#viewport' or {selector: '#viewport', padding: 0}

Tooltip 工具提示方法

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

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

Tooltip 工具提示事件

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

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

更多实例

自定义工具提示设计

使用 CSS 自定义工具提示的外观:

实例

/* 工具提示 */
.test + .tooltip > .tooltip-inner {
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 15px;
  font-size: 20px;
}

/* 顶部工具提示 */
.test + .tooltip.top > .tooltip-arrow {
  border-top: 5px solid green;
}

/* 底部工具提示 */
.test + .tooltip.bottom > .tooltip-arrow {
  border-bottom: 5px solid blue;
}

/* 左侧工具提示 */
.test + .tooltip.left > .tooltip-arrow {
  border-left: 5px solid red;
}

/* 右侧工具提示 */
.test + .tooltip.right > .tooltip-arrow {
  border-right: 5px solid black;
}
亲自试一试 »

❮ 上一节 下一节 ❯