jq中的tooltip提示框

最新推荐文章于 2026-06-22 16:59:05 发布

转载最新推荐文章于 2026-06-22 16:59:05 发布 · 2.4k 阅读

收录于

jq 专栏收录该内容

26 篇文章

订阅专栏

本文演示了如何使用jQuery UI的工具提示框部件为带有title属性的元素创建动态提示信息。通过简单的HTML结构与jQuery UI结合，可以快速实现美观且实用的提示效果。

使用于带title属性的所有元素的事件代理

<!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>

如果需要适应工具提示框指定的样式，则可以使用下面的css class名称：

ui-tooltip:工具提示框的外层容器；

ui-tooltip-content：工具提示框的内容；