工具提示框(Tooltip)
可自定义的、可主题化的工具提示框,替代原生的工具提示框。
如需了解更多有关 tooltip 部件的细节,请查看 API 文档 工具提示框部件(Tooltip Widget)。
默认功能
悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。
实例
jQuery UI 工具提示框(Tooltip) - 默认功能 Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。
但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。
工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。
悬停在相应的区域上查看工具提示框。
运行实例 »
点击 "运行实例" 按钮查看在线实例
自定义样式
悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。
实例
jQuery UI 工具提示框(Tooltip) - 自定义样式 Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。
但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。
工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。
悬停在相应的区域上查看工具提示框。
运行实例 »
点击 "运行实例" 按钮查看在线实例
自定义动画
本实例演示了如何使用 show 和 hide 选项来自定义动画,也可以使用 open 事件来自定义动画。
自定义内容
演示如何通过自定义 items 和 content 选项,来组合不同的事件委托工具提示框到一个单一的实例中。
您可能需要与地图工具提示框进行交互,这是未来版本中的一个待实现的功能。
实例
jQuery UI 工具提示框(Tooltip) - 自定义内容 所有的图片源自 Wikimedia Commons,且归 CC BY-SA 3.0 下版权持有人所有。
运行实例 »
点击 "运行实例" 按钮查看在线实例
表单
使用下面的按钮来显示帮助文本,或者只需要让鼠标悬停在输入框上或者让输入框获得焦点,即可显示相应输入框的帮助文本。
在 CSS 中定义一个固定的宽度,让同时显示所有的帮助文本时看起来更一致。
跟踪鼠标
本实例中的工具提示框是相对于鼠标进行定位的,当鼠标在元素上移动时,它会跟随鼠标移动。
实例
jQuery UI 工具提示框(Tooltip) - 跟踪鼠标 Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。
但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。
工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。
悬停在相应的区域上查看工具提示框。
运行实例 »
点击 "运行实例" 按钮查看在线实例
视频播放器
一个虚拟的视频播放器,带有喜欢/分享/统计按钮,每个按钮都带有自定义样式的工具提示框。