|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> |
|
5 <title>jQuery Tooltip Plugin Demo</title> |
|
6 |
|
7 <link rel="stylesheet" href="../jquery.tooltip.css" /> |
|
8 <link rel="stylesheet" href="screen.css" /> |
|
9 <script src="../lib/jquery.js" type="text/javascript"></script> |
|
10 <script src="../lib/jquery.bgiframe.js" type="text/javascript"></script> |
|
11 <script src="../lib/jquery.dimensions.js" type="text/javascript"></script> |
|
12 <script src="../jquery.tooltip.js" type="text/javascript"></script> |
|
13 |
|
14 <script src="chili-1.7.pack.js" type="text/javascript"></script> |
|
15 |
|
16 <script type="text/javascript"> |
|
17 $(function() { |
|
18 $('#set1 *').tooltip(); |
|
19 |
|
20 $("#foottip a").tooltip({ |
|
21 bodyHandler: function() { |
|
22 return $($(this).attr("href")).html(); |
|
23 }, |
|
24 showURL: false |
|
25 }); |
|
26 |
|
27 $('#tonus').tooltip({ |
|
28 delay: 0, |
|
29 showURL: false, |
|
30 bodyHandler: function() { |
|
31 return $("<img/>").attr("src", this.src); |
|
32 } |
|
33 }); |
|
34 |
|
35 $('#yahoo a').tooltip({ |
|
36 track: true, |
|
37 delay: 0, |
|
38 showURL: false, |
|
39 showBody: " - ", |
|
40 fade: 250 |
|
41 }); |
|
42 |
|
43 $("select").tooltip({ |
|
44 left: 25 |
|
45 }); |
|
46 |
|
47 $("map > area").tooltip({ positionLeft: true }); |
|
48 |
|
49 $("#fancy, #fancy2").tooltip({ |
|
50 track: true, |
|
51 delay: 0, |
|
52 showURL: false, |
|
53 fixPNG: true, |
|
54 showBody: " - ", |
|
55 extraClass: "pretty fancy", |
|
56 top: -15, |
|
57 left: 5 |
|
58 }); |
|
59 |
|
60 $('#pretty').tooltip({ |
|
61 track: true, |
|
62 delay: 0, |
|
63 showURL: false, |
|
64 showBody: " - ", |
|
65 extraClass: "pretty", |
|
66 fixPNG: true, |
|
67 left: -120 |
|
68 }); |
|
69 |
|
70 $('#right a').tooltip({ |
|
71 track: true, |
|
72 delay: 0, |
|
73 showURL: false, |
|
74 extraClass: "right" |
|
75 }); |
|
76 $('#right2 a').tooltip({ showURL: false, positionLeft: true }); |
|
77 |
|
78 $("#block").click($.tooltip.block); |
|
79 |
|
80 }); |
|
81 </script> |
|
82 |
|
83 </head> |
|
84 <body> |
|
85 <h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/">jQuery Tooltip Plugin</a> Demo</h1> |
|
86 <div id="main"> |
|
87 <fieldset id="set1"> |
|
88 <legend>Three elements with tooltips, default settings</legend> |
|
89 <a title="A tooltip with default settings, the href is displayed below the title" href="http://google.de">Link to google</a> |
|
90 <br/> |
|
91 <label title="A label with a title and default settings, no href here" for="text1">Input something please!</label> |
|
92 <br/> |
|
93 <input title="Note that the tooltip disappears when clicking the input element" type="text" value="Test" name="action" id="text1"/> |
|
94 |
|
95 <h3>Code</h3> |
|
96 <pre><code class="mix">$('#set1 *').tooltip();</code></pre> |
|
97 </fieldset> |
|
98 |
|
99 <fieldset id="foottip"> |
|
100 <legend>Using bodyHandler to display footnotes in the tooltip</legend> |
|
101 Some text referring to a <a href="#footnote">footnote</a>. |
|
102 <br/> |
|
103 <br/> |
|
104 <br/> |
|
105 <br/> |
|
106 <br/> |
|
107 <div id="footnote"><em>And here</em> is the actual footnote, complete with nested <strong>HTML</strong>.</div> |
|
108 |
|
109 <h3>Code</h3> |
|
110 <pre><code class="mix">$("#foottip a").tooltip({ |
|
111 bodyHandler: function() { |
|
112 return $($(this).attr("href")).html(); |
|
113 }, |
|
114 showURL: false |
|
115 });</code></pre> |
|
116 </fieldset> |
|
117 |
|
118 <fieldset> |
|
119 <legend>An image with a tooltip</legend> |
|
120 <img id="tonus" src="image.png" height="80" title="No delay. The src value is displayed below the title" /> |
|
121 <h3>Code</h3> |
|
122 <pre><code class="mix">$('#tonus').tooltip({ |
|
123 delay: 0, |
|
124 showURL: false, |
|
125 bodyHandler: function() { |
|
126 return $("<img/>").attr("src", this.src); |
|
127 } |
|
128 });</code></pre> |
|
129 </fieldset> |
|
130 |
|
131 <fieldset> |
|
132 <legend>Blocking tooltips</legend> |
|
133 <button id="block">Click this button to block/unblock all tooltips</button> |
|
134 <pre><code class="mix">$("#block").click($.tooltip.block);</code></pre> |
|
135 </fieldset> |
|
136 |
|
137 <fieldset> |
|
138 <legend>The next four links have no delay with tracking and fading, with extra content:</legend> |
|
139 <div id="yahoo"> |
|
140 <a title="Yahoo doo - more content" href="http://yahoo.com">Link to yahoo</a> |
|
141 <a title="Yahoo doo2 - wohooo" href="http://yahoo.com">Link to yahoo1</a> |
|
142 <a title="Yahoo doo3" href="http://yahoo.com">Link to yahoo2</a> |
|
143 <a title="Yahoo doo4 - buga!" href="http://yahoo.com">Link to yahoo3</a> |
|
144 </div> |
|
145 <select><option>bgiframe test</option></select> |
|
146 <h3>Code</h3> |
|
147 <pre><code class="mix">$('#yahoo a').tooltip({ |
|
148 track: true, |
|
149 delay: 0, |
|
150 showURL: false, |
|
151 showBody: " - ", |
|
152 fade: 250 |
|
153 });</code></pre> |
|
154 </fieldset> |
|
155 |
|
156 <fieldset> |
|
157 <legend>Tooltips with extra classes. Useful for different tooltip styles on a single page.</legend> |
|
158 <em>Note how the one on the right gets a different background image when at the right viewport border.</em> |
|
159 <br/> |
|
160 <span id="fancy" title="You are dead, this is hell. - Please note the custom positioning here!">A fancy tooltip, now with some custom positioning.</span> |
|
161 <span id="fancy2" title="You are dead, this is hell. - Please note the custom positioning here!">A fancy tooltip, now with some custom positioning.</span> |
|
162 <p><span id="pretty" title="I am pretty! - I am a very pretty tooltip, I need lot's of attention from buggers like you! Yes!">And now, for the fancy stuff, a tooltip with an extra class for nice shadows, and some extra content</span></p> |
|
163 <br/> |
|
164 <br/> |
|
165 <br/> |
|
166 <select><option>bgiframe test</option></select> |
|
167 <h3>Code</h3> |
|
168 <pre><code class="mix">$("#fancy, #fancy2").tooltip({ |
|
169 track: true, |
|
170 delay: 0, |
|
171 showURL: false, |
|
172 opacity: 1, |
|
173 fixPNG: true, |
|
174 showBody: " - ", |
|
175 extraClass: "pretty fancy", |
|
176 top: -15, |
|
177 left: 5 |
|
178 }); |
|
179 |
|
180 $('#pretty').tooltip({ |
|
181 track: true, |
|
182 delay: 0, |
|
183 showURL: false, |
|
184 showBody: " - ", |
|
185 extraClass: "pretty", |
|
186 fixPNG: true, |
|
187 opacity: 0.95, |
|
188 left: -120 |
|
189 });</code></pre> |
|
190 </fieldset> |
|
191 |
|
192 <fieldset> |
|
193 <legend>Selects</legend> |
|
194 <select title="fancy select with a tooltip"> |
|
195 <option>1. option</option> |
|
196 <option>2. option</option> |
|
197 <option>3. option</option> |
|
198 </select> |
|
199 </fieldset> |
|
200 |
|
201 <fieldset> |
|
202 <legend>Image map with tooltips.</legend> |
|
203 |
|
204 <img id="map" src="karte.png" width="345" height="312" border="0" usemap="#Landkarte"> |
|
205 <map name="Landkarte"> |
|
206 <area shape="rect" coords="11,10,59,29" |
|
207 href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz"> |
|
208 <area shape="rect" coords="42,36,96,57" |
|
209 href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden"> |
|
210 <area shape="rect" coords="42,59,78,80" |
|
211 href="http://www.mainz.de/" alt="Mainz" title="Mainz"> |
|
212 <area shape="rect" coords="100,26,152,58" |
|
213 href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt"> |
|
214 <area shape="rect" coords="27,113,93,134" |
|
215 href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim"> |
|
216 <area shape="rect" coords="100,138,163,159" |
|
217 href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg"> |
|
218 <area shape="rect" coords="207,77,266,101" |
|
219 href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg"> |
|
220 <area shape="rect" coords="282,62,344,85" |
|
221 href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg"> |
|
222 <area shape="rect" coords="255,132,316,150" |
|
223 href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg"> |
|
224 <area shape="rect" coords="78,182,132,200" |
|
225 href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe"> |
|
226 <area shape="rect" coords="142,169,200,193" |
|
227 href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn"> |
|
228 <area shape="rect" coords="140,209,198,230" |
|
229 href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart"> |
|
230 <area shape="rect" coords="187,263,222,281" |
|
231 href="http://www.ulm.de/" alt="Ulm" title="Ulm"> |
|
232 <area shape="rect" coords="249,278,304,297" |
|
233 href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg"> |
|
234 <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310" |
|
235 href="http://www.baden-aktuell.de/" alt="Baden" title="Baden"> |
|
236 </map> |
|
237 <h3>Code</h3> |
|
238 <pre><code class="mix">$("map *").tooltip({ positionLeft: true });</code></pre> |
|
239 </fieldset> |
|
240 |
|
241 <fieldset> |
|
242 <legend>Testing repositioning at viewport borders</legend> |
|
243 <p id="right"> |
|
244 Tooltip with fixed width<br/> |
|
245 <a title="Short title" href="http://goggle">Google me!</a><br/> |
|
246 <a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle">Google me!</a> |
|
247 </p> |
|
248 <p id="right2"> |
|
249 Tooltip width auto width<br/> |
|
250 <a title="Short title" href="http://goggle">Google me!</a><br/> |
|
251 <a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle">Google me!</a> |
|
252 </p> |
|
253 <h3>Code</h3> |
|
254 <pre><code class="mix">$('#right a').tooltip({ |
|
255 track: true, |
|
256 delay: 0, |
|
257 showURL: false, |
|
258 extraClass: "right" |
|
259 }); |
|
260 $('#right2 a').tooltip({ showURL: false, positionLeft: true });</code></pre> |
|
261 </fieldset> |
|
262 </div> |
|
263 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> |
|
264 </script> |
|
265 <script type="text/javascript"> |
|
266 _uacct = "UA-2623402-1"; |
|
267 urchinTracker(); |
|
268 </script> |
|
269 </body> |
|
270 </html> |