程序员经验分享-hwhale

jQuery 入门教程(43): jQuery UI Tooltip 示例

2023-10-30


JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：

1 <!doctype html>
2 <html lang="en">
3 <head>
4     <meta charset="utf-8" />
5     <title>jQuery UI Demos</title>
6     <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
7     <script src="scripts/jquery-1.9.1.js"></script>
8     <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
9     <script>
10         $(function () {
11             $(document).tooltip();
12         });
13   </script>
14   <style>
15   label {
16     display: inline-block;
17     width: 5em;
18   }
19   </style>
20 </head>
21 <body>
22   
23 <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
24 the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
25 <p>But as it's not a native tooltip, it can be styled. Any themes built with
26 <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
27 will also style tooltips accordingly.</p>
28 <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
29 <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
30 <p>Hover the field to see the tooltip.</p>
31   
32   
33 </body>
34 </html>

20130426001

此外，可以通过CSS修改缺省Tooltip的显示风格，或是自定义Tooltip 显示内容（比如地图，图像等等），这里就不一一介绍了。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery学习笔记

jQuery 入门教程(43): jQuery UI Tooltip 示例 的相关文章

随机推荐

热门标签