JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：
1 | <!doctype html> |
2 | <htmllang="en"> |
3 | <head> |
4 | <metacharset="utf-8"/> |
5 | <title>jQuery UI Demos</title> |
6 | <linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> |
7 | <scriptsrc="scripts/jquery-1.9.1.js"></script> |
8 | <scriptsrc="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><ahref="#"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 | <ahref="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><labelfor="age">Your age:</label><inputid="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> |
此外，可以通过CSS修改缺省Tooltip的显示风格，或是自定义Tooltip 显示内容（比如地图，图像等等），这里就不一一介绍了。
4044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
