jQuery UI 教程

jQuery UI API - 工具提示框部件(Tooltip Widget)

所属类别

小部件(Widgets)

用法

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

版本新增:1.9

工具提示框(Tooltip)取代了原生的工具提示框,让它们可主题化,也允许进行各种自定义:

  • 显示不仅仅是标题的其他内容,就如内联的脚注或通过 Ajax 检索的额外内容。
  • 自定义定位,例如,在元素上居中工具提示框。
  • 添加额外的样式来定制警告或错误区域的外观。

默认使用一个渐变的动画来显示和隐藏工具提示框,这种外观与简单的切换可见度相比更具灵性。这可以通过 showhide 选项进行定制。

itemscontent 选项需要保持同步。如果您改变了其中一个,您需要同时改变另一个。

在一般情况下,禁用的元素不会触发任何 DOM 事件。因此,适当地控制禁用元素的工具提示框是不可能的,因为我们需要监听事件来决定何时显示和隐藏工具提示框。这就导致 jQuery UI 不能保证对附加到禁用元素上的工具提示框任何层次上的支持。这意味着如果您需要在禁用元素上进行提示,您可能需要使用一个原生的提示框和 jQuery UI 工具提示框的混合物。

主题化

工具提示框部件(Tooltip Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用工具提示框指定的样式,则可以使用下面的 CSS class 名称:

  • ui-tooltip:工具提示框的外层容器。
    • ui-tooltip-content:工具提示框的内容。

依赖

附加说明

  • 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。

实例

使用带有 title 属性的所有元素的事件代理,在文档上创建一个工具提示框(Tooltip)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件(Tooltip Widget)演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>
  <a href="#" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

其他扩展

用微信扫一扫

收藏