菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA 生成式 AI SCIPY AWS 网络安全 数据科学
     ❯   

Bootstrap JS 工具提示


JS 工具提示 (tooltip.js)

工具提示插件是一个小型弹出框,当用户将鼠标指针悬停在某个元素上时出现。

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


通过 data-* 属性

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

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

示例

<a href="#" data-toggle="tooltip" title="Hooray!">将鼠标悬停在我身上</a>
自己动手试一试 »

通过 JavaScript

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

示例

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

// 选择指定元素
$('#myTooltip').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' 或 {selector: '#viewport', padding: 0}


工具提示方法

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

方法 描述 试一试
.tooltip(options) 使用选项激活工具提示。有关有效值,请参阅上面的选项 试一试
.tooltip("show") 显示工具提示 试一试
.tooltip("hide") 隐藏工具提示 试一试
.tooltip("toggle") 切换工具提示的显示/隐藏状态 试一试
.tooltip("destroy") 隐藏并销毁工具提示 试一试

工具提示事件

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

事件 描述 试一试
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;
}
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持