corrade-http-templates – Blame information for rev 57

Subversion Repositories:
Rev:
Rev Author Line No. Line
57 office 1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Tooltip Visual Test: Default</title>
6 <link rel="stylesheet" href="../../../themes/base/all.css">
7 <style>
8 .group {
9 margin-top: 2em;
10 }
11 </style>
12 <script src="../../../external/requirejs/require.js"></script>
13 <script src="../../../demos/bootstrap.js" data-modules="button">
14 // default
15 $( "#context1, form, #childish, #nested-input" ).tooltip();
16  
17 // Custom class, replaces ui-widget-content
18 $( "#context2" ).tooltip({
19 classes: {
20 "ui-tooltip": "ui-corner-all ui-widget-header"
21 }
22 });
23 $( "#right1" ).tooltip({
24 classes: {
25 "ui-tooltip": "ui-corner-all ui-state-error"
26 }
27 });
28  
29 // Synchronous content
30 $( "#footnotes" ).tooltip({
31 items: "[href^='#']",
32 content: function() {
33 return $( $( this ).attr( "href" ) ).html();
34 }
35 });
36  
37 // Asynchronous content
38 $( "#async" ).tooltip({
39 content: function( response ) {
40 setTimeout(function() {
41 response( "I loaded <strong>asynchronously</strong>!" );
42 }, 1000 );
43 return "Loading...";
44 }
45 });
46  
47 // Asynchronous content with caching
48 var content;
49 $( "#async2" ).tooltip({
50 content: function( response ) {
51 if ( content ) {
52 return content;
53 }
54 setTimeout(function() {
55 content = "<strong>Hello</strong> world!";
56 response( content );
57 }, 1000 );
58 return "Loading...";
59 }
60 });
61  
62 // Custom position
63 $( "#right2" ).tooltip({
64 classes: {
65 "ui-tooltip": "ui-corner-all ui-state-highlight"
66 },
67 position: {
68 my: "center top",
69 at: "center bottom+10"
70 }
71 });
72  
73 $( "#button1" ).button();
74 $( "#button2" ).button({
75 icons: {
76 primary: "ui-icon-wrench"
77 }
78 });
79 $( "#button3, #button4" ).button({
80 icons: {
81 primary: "ui-icon-wrench"
82 },
83 text: false
84 });
85 $( "#buttons" ).tooltip({
86 position: {
87 my: "center bottom",
88 at: "center top-5"
89 }
90 });
91  
92 $( "#blurs-on-click" ).tooltip({
93 track: true,
94 show: {
95 delay: 500
96 }
97 }).on( "click", function() {
98 $( "#focus-on-me" ).trigger( "focus" );
99 });
100 </script>
101 </head>
102 <body>
103  
104 <div>
105 <p>Lots of tooltipped elements close together.<br>
106 Mouse through them quickly and slowly.</p>
107 <ul id="context1">
108 <li><a href="#" title="Tooltip text 1">Anchor 1</a></li>
109 <li><a href="#" title="Tooltip text 2">Anchor 2</a></li>
110 <li><a href="#" title="Tooltip text 3">Anchor 3</a></li>
111 <li><a href="#" title="Tooltip text 4 more Tooltip text Tooltip text ">Anchor 4</a></li>
112 <li><a href="#" title="Tooltip text 5 more Tooltip text Tooltip text ">Anchor 5</a></li>
113 <li><a href="#" title="Tooltip text 6 more Tooltip text Tooltip text ">Anchor 6</a></li>
114 </ul>
115  
116 <div class="group" style="position: absolute; right: 1em; text-align: right;">
117 <p>These elements are right aligned.<br>
118 One collides and one uses custom position.</p>
119 <p id="right1" title="right aligned element">
120 collision detection should kick in around here
121 </p>
122 <p id="right2" title="right aligned element with custom position">
123 right aligned with custom position
124 </p>
125 </div>
126  
127 <div class="group">
128 <p>These footnotes pull content form the elements they link to.</p>
129 <div id="footnotes">
130 <a href="#footnote1">I'm a link to a footnote.</a>
131 <a href="#footnote2">I'm another link to a footnote.</a>
132 </div>
133 </div>
134  
135 <div class="group">
136 <p>These elements load their content asynchronously.<br>
137 There should be a loading message while the content is retrieved.</p>
138 <div id="async" style="width: 100px;" class="ui-widget-content" title="never be seen">
139 async
140 </div>
141 <div id="async2" style="width: 100px;" class="ui-widget-content" title="never be seen">
142 async + cache
143 </div>
144 </div>
145  
146 <div class="group" style="width: 300px;">
147 <p>Nested elements.</p>
148 <div id="context2">
149 <div title="nested parent" style="border:1px solid red;">
150 tooltipped
151 <span title="nested child" style="border:1px solid green; padding-left: 25px;">
152 nested tooltipped
153 <span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span>
154 </span>
155 </div>
156 <input title="nested input title">
157 </div>
158 <div id="childish" style="border: 1px solid black;" title="element with child elements">
159 Text in <strong>bold</strong>.
160 </div>
161 </div>
162  
163 <button id="blurs-on-click" title="button title text">click me to focus something else</button>
164 <input id="focus-on-me">
165  
166 <div class="group">
167 <p>Play around with focusing and hovering of form elements.</p>
168 <form>
169 <div>
170 <label for="first">First Name:</label>
171 <input id="first" title="Your first name is optional">
172 </div>
173 <div>
174 <label for="last">Last Name:</label>
175 <input id="last" title="Your last name is optional">
176 </div>
177 </form>
178  
179 <p>Some inputs nested inside labels:</p>
180 <div id="nested-input">
181 <label title="test"><input type="checkbox">This is a test</label>
182 <label title="test2"><input type="checkbox">This is a test</label>
183 <label><input type="checkbox" title="test3">This is a test</label>
184 <label><input type="checkbox" title="test4">This is a test</label>
185 </div>
186  
187 <p>Some button widgets:</p>
188 <div id="buttons">
189 <button id="button1" title="Button Tooltip">Button Label</button>
190 <button id="button2" title="Icon Button">Button with Icon</button>
191 <button id="button3">Icon Only Button 1</button>
192 <button id="button4">Icon Only Button 2</button>
193 </div>
194 </div>
195  
196 <div class="group">
197 <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div>
198 <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div>
199 </div>
200 </div>
201  
202 <div style="height: 2000px"></div>
203  
204 </body>
205 </html>