×
jQuery UI 教程jQuery UI 简介jQuery UI 下载jQuery UI 使用jQuery UI 定制jQuery UI 工作原理

jQuery UI 主题

jQuery UI 主题jQuery UI ThemeRollerjQuery UI CSS 框架 APIjQuery UI 设计主题

jQuery UI 部件库

jQuery UI 部件库jQuery UI 扩展小部件jQuery UI 小部件方法调用jQuery UI 为何使用部件库jQuery UI 如何使用部件库

jQuery UI 参考手册

jQuery UI API 文档API 类别 – 特效API 类别 – 特效核心API 类别 – 交互API 类别 – 方法重载API 类别 – 方法API 类别 – 选择器API 类别 – 主题API 类别 – UI 核心API 类别 – 实用工具API 类别 – 小部件

jQuery UI 实例

jQuery UI 实例拖动(Draggable)放置(Droppable)缩放(Resizable)选择(Selectable)排序(Sortable)折叠面板(Accordion)自动完成(Autocomplete)按钮(Button)日期选择器(Datepicker)对话框(Dialog)菜单(Menu)进度条(Progressbar)滑块(Slider)旋转器(Spinner)标签页(Tabs)工具提示框(Tooltip)特效(Effect)显示(Show)隐藏(Hide)切换(Toggle)添加 .addClass()移除 .removeClass()切换 .toggleClass()转换 .switchClass()颜色动画(Color Animation)定位(Position)部件库(Widget Factory)

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


jQuery UI API 类别 – 小部件jQuery UI API 类别 – 小部件


所属类别

小部件(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>


jQuery UI API 类别 – 小部件jQuery UI API 类别 – 小部件


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)