jQuery UI Chinese Reference Manual /工具提示框(Tooltip)

工具提示框(Tooltip)

可自定义的、可主题化的工具提示框,替代原生的工具提示框。

如需了解更多有关 tooltip 部件的细节,请查看 API 文档 工具提示框部件(Tooltip Widget)。

默认功能

悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。

实例

    jQuery UI 工具提示框(Tooltip) - 默认功能       

Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。

但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。

工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。

悬停在相应的区域上查看工具提示框。


运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义样式

悬停在链接上,或者使用 tab 键循环切换聚焦在每个元素上。

实例

    jQuery UI 工具提示框(Tooltip) - 自定义样式       

Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。

但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。

工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。

悬停在相应的区域上查看工具提示框。


运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义动画

本实例演示了如何使用 show 和 hide 选项来自定义动画,也可以使用 open 事件来自定义动画。

实例

    jQuery UI 工具提示框(Tooltip) - 自定义动画      

这里有多种方式自定义工具提示框的动画。

您可以使用 showhide 选项。

您也可以使用 open 事件。


运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义内容

演示如何通过自定义 items 和 content 选项,来组合不同的事件委托工具提示框到一个单一的实例中。

您可能需要与地图工具提示框进行交互,这是未来版本中的一个待实现的功能。

实例

    jQuery UI 工具提示框(Tooltip) - 自定义内容       

圣史蒂芬大教堂(St. Stephen's Cathedral)

奥地利维也纳(Vienna, Austria)

圣史蒂芬大教堂(St. Stephen's Cathedral)

塔桥(Tower Bridge)

英国伦敦(London, England)

塔桥(Tower Bridge)

所有的图片源自 Wikimedia Commons,且归 CC BY-SA 3.0 下版权持有人所有。


运行实例 »

点击 "运行实例" 按钮查看在线实例

表单

使用下面的按钮来显示帮助文本,或者只需要让鼠标悬停在输入框上或者让输入框获得焦点,即可显示相应输入框的帮助文本。

在 CSS 中定义一个固定的宽度,让同时显示所有的帮助文本时看起来更一致。

实例

    jQuery UI 工具提示框(Tooltip) - 表单       

运行实例 »

点击 "运行实例" 按钮查看在线实例

跟踪鼠标

本实例中的工具提示框是相对于鼠标进行定位的,当鼠标在元素上移动时,它会跟随鼠标移动。

实例

    jQuery UI 工具提示框(Tooltip) - 跟踪鼠标       

Tooltips 可被绑定到任意的元素上。当您的鼠标悬停在元素上时,title 属性会显示在元素旁边的一个小框中,就像原生的工具提示框一样。

但是由于它不是一个原生的工具提示框,所以它可以被定义样式。通过 ThemeRoller 创建的主题也可以相应地定义工具提示框的样式。

工具提示框也可以用于表单元素,来显示每个区域中的一些额外的信息。

悬停在相应的区域上查看工具提示框。


运行实例 »

点击 "运行实例" 按钮查看在线实例

视频播放器

一个虚拟的视频播放器,带有喜欢/分享/统计按钮,每个按钮都带有自定义样式的工具提示框。

实例

    jQuery UI 工具提示框(Tooltip) - 视频播放器       
这里是视频 (HTML5?)

运行实例 »

点击 "运行实例" 按钮查看在线实例