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

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

1
2 <htmllang="en">
3 <head>
4 <metacharset="utf-8"/>
5 <title>jQuery UI Demostitle>
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">Tooltipsa> 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">ThemeRollera>
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 显示内容(比如地图,图像等等),这里就不一一介绍了。

你可能感兴趣的:(jQuery 入门教程(43): jQuery UI Tooltip 示例)