菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO 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 GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 工具提示


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" - 手动触发工具提示
提示:要传递多个值,请用空格分隔
试一试
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 过渡完成后) 试一试

×

联系销售

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

报告错误

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

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

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