source: spip-zone/_plugins_/tooltip/trunk/demo/index.html @ 121481

Last change on this file since 121481 was 56400, checked in by romy@…, 9 years ago

Portage sous SPIP du plugin jQuery Tooltip de Jörn Zaefferer : ​http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  • Property svn:executable set to *
File size: 8.7 KB
Line 
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="../css/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="../js/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";
267urchinTracker();
268</script>
269</body>
270</html>
Note: See TracBrowser for help on using the repository browser.