← 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: Keith Hughitt
  • Date: 2010-02-17 22:00:59 UTC
  • mfrom: (402.1.68 hv)
  • Revision ID: keith.hughitt@nasa.gov-20100217220059-wmdq7kgokj4seryx
Merged with Keith's branch.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/jquery/jquery-tooltip/demo/index.html
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 $("&lt;img/&gt;").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&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>
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>
 
 
b'\\ No newline at end of file'