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