← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to lib/jquery/jquery-tooltip/demo/index.html

  • Committer: V. Keith Hughitt
  • Date: 2009-03-26 19:20:57 UTC
  • Revision ID: hughitt1@kore-20090326192057-u0x8rf8sf5lmmnwh
nightly build 03-26-2009: Using alpha-channel JPEG 2000 dataset

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery-tooltip/demo/index.html
25
25
});
26
26
 
27
27
$('#tonus').tooltip({
28
 
        delay: 0,
 
28
        delay: 0,
29
29
        showURL: false,
30
30
        bodyHandler: function() {
31
31
                return $("<img/>").attr("src", this.src);
36
36
        track: true,
37
37
        delay: 0,
38
38
        showURL: false,
39
 
        showBody: " - "
40
 
});
 
39
        showBody: " - ",
 
40
        fade: 250
 
41
});
 
42
 
 
43
$("select").tooltip({
 
44
        left: 25
 
45
});
 
46
 
 
47
$("map > area").tooltip({ positionLeft: true });
41
48
 
42
49
$("#fancy, #fancy2").tooltip({
43
50
        track: true,
44
51
        delay: 0,
45
52
        showURL: false,
46
 
        opacity: 1,
47
53
        fixPNG: true,
48
54
        showBody: " - ",
49
55
        extraClass: "pretty fancy",
58
64
        showBody: " - ",
59
65
        extraClass: "pretty",
60
66
        fixPNG: true,
61
 
        opacity: 0.95,
62
67
        left: -120
63
68
});
64
69
 
68
73
        showURL: false,
69
74
        extraClass: "right"
70
75
});
71
 
$('#right2 a').tooltip({ showURL: false });
 
76
$('#right2 a').tooltip({ showURL: false, positionLeft: true });
72
77
 
73
78
$("#block").click($.tooltip.block);
74
79
 
75
 
$("#remote").click(function() {
76
 
        $("#username").tooltipFor();
77
 
});
78
 
 
79
80
});
80
81
</script>
81
82
 
118
119
                <legend>An image with a tooltip</legend>
119
120
                <img id="tonus" src="image.png" height="80" title="No delay. The src value is displayed below the title" />
120
121
                <h3>Code</h3>
121
 
        <pre><code class="mix">$('img').tooltip({
122
 
        delay: 0
 
122
        <pre><code class="mix">$('#tonus').tooltip({
 
123
        delay: 0,
 
124
        showURL: false,
 
125
        bodyHandler: function() {
 
126
                return $("&lt;img/&gt;").attr("src", this.src);
 
127
        }
123
128
});</code></pre>
124
129
        </fieldset>
125
130
        
130
135
        </fieldset>
131
136
        
132
137
        <fieldset>
133
 
                <legend>The next four links have no delay with tracking, with extra content:</legend>
 
138
                <legend>The next four links have no delay with tracking and fading, with extra content:</legend>
134
139
                <div id="yahoo">
135
140
                        <a title="Yahoo doo - more content" href="http://yahoo.com">Link to yahoo</a>
136
141
                        <a title="Yahoo doo2 - wohooo" href="http://yahoo.com">Link to yahoo1</a>
139
144
                </div>
140
145
                <select><option>bgiframe test</option></select>
141
146
                <h3>Code</h3>
142
 
                <pre><code class="mix">$('#yahoo a').tooltip({
143
 
        track: true,
144
 
        delay: 0,
145
 
        showURL: false,
146
 
        showBody: " - ",
147
 
        opacity: 0.85
 
147
                <pre><code class="mix">$('#yahoo a').tooltip({
 
148
        track: true,
 
149
        delay: 0,
 
150
        showURL: false,
 
151
        showBody: " - ",
 
152
        fade: 250
148
153
});</code></pre>
149
154
        </fieldset>
150
155
        
183
188
        left: -120
184
189
});</code></pre>
185
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&uuml;rzburg" title="W&uuml;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&uuml;rnberg" title="N&uuml;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>
186
240
        
187
241
        <fieldset>
188
242
                <legend>Testing repositioning at viewport borders</legend>
203
257
        showURL: false,
204
258
        extraClass: "right"
205
259
});
206
 
$('#right2 a').tooltip({ showURL: false });</code></pre>
 
260
$('#right2 a').tooltip({ showURL: false, positionLeft: true });</code></pre>
207
261
        </fieldset>
208
262
</div>
209
263
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">