source: documentation/trunk/tutorial_sample_files/libraries/althor/js/poshytip-1.1/demo/demo.html@ 28599

Last change on this file since 28599 was 28599, checked in by jlwhisler, 10 years ago

Draft interface for use in Defining Libraries tutorial.

File size: 26.2 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3<head>
4 <title>Poshy Tip jQuery Plugin Demo Page</title>
5 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
6
7
8 <!-- Tooltip classes -->
9 <link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
10 <link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
11 <link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
12 <link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
13 <link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
14 <link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
15 <link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />
16
17 <!-- jQuery and the Poshy Tip plugin files -->
18 <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
19 <script type="text/javascript" src="../src/jquery.poshytip.js"></script>
20
21 <!-- Setup examples on this page -->
22 <script type="text/javascript">
23 //<![CDATA[
24 $(function(){
25
26 $('#demo-basic').poshytip();
27 $('#demo-tip-yellow').poshytip();
28 $('#demo-tip-violet').poshytip({
29 className: 'tip-violet',
30 bgImageFrameSize: 9
31 });
32 $('#demo-tip-darkgray').poshytip({
33 className: 'tip-darkgray',
34 bgImageFrameSize: 11,
35 offsetX: -25
36 });
37 $('#demo-tip-skyblue').poshytip({
38 className: 'tip-skyblue',
39 bgImageFrameSize: 9,
40 offsetX: 0,
41 offsetY: 20
42 });
43 $('#demo-tip-yellowsimple').poshytip({
44 className: 'tip-yellowsimple',
45 showTimeout: 1,
46 alignTo: 'target',
47 alignX: 'center',
48 offsetY: 5,
49 allowTipHover: false
50 });
51 $('#demo-tip-twitter').poshytip({
52 className: 'tip-twitter',
53 showTimeout: 1,
54 alignTo: 'target',
55 alignX: 'center',
56 offsetY: 5,
57 allowTipHover: false,
58 fade: false,
59 slide: false
60 });
61 $('#demo-tip-green').poshytip({
62 className: 'tip-green',
63 offsetX: -7,
64 offsetY: 16,
65 allowTipHover: false
66 });
67 $('#demo-form-name').poshytip({
68 className: 'tip-yellowsimple',
69 showOn: 'focus',
70 alignTo: 'target',
71 alignX: 'right',
72 alignY: 'center',
73 offsetX: 5
74 });
75 $('#demo-form-email').poshytip({
76 className: 'tip-yellowsimple',
77 showOn: 'focus',
78 alignTo: 'target',
79 alignX: 'left',
80 alignY: 'center',
81 offsetX: 5
82 });
83 $('#demo-form-site').poshytip({
84 className: 'tip-yellowsimple',
85 showOn: 'focus',
86 alignTo: 'target',
87 alignX: 'inner-left',
88 offsetX: 0,
89 offsetY: 5
90 });
91 $('#demo-form-subject').poshytip({
92 className: 'tip-yellowsimple',
93 showOn: 'focus',
94 alignTo: 'target',
95 alignX: 'center',
96 alignY: 'bottom',
97 offsetX: 0,
98 offsetY: 5
99 });
100 $('#demo-async-timeout').poshytip({
101 content: function(updateCallback) {
102 window.setTimeout(function() {
103 updateCallback('Tooltip content updated!');
104 }, 1000);
105 return 'Loading...';
106 }
107 });
108
109 var flickrFeedsCache = {};
110 $('#demo-async-flickr > a').poshytip({
111 className: 'tip-darkgray',
112 bgImageFrameSize: 11,
113 alignY: 'bottom',
114 content: function(updateCallback) {
115 var rel = $(this).attr('rel');
116 if (flickrFeedsCache[rel] && flickrFeedsCache[rel].container)
117 return flickrFeedsCache[rel].container;
118 if (!flickrFeedsCache[rel]) {
119 flickrFeedsCache[rel] = { container: null };
120 var tagsComma = rel.substring(4).replace('-', ',');
121 $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&tagmode=all&format=json&jsoncallback=?',
122 function(data) {
123 var container = $('<div/>').addClass('flickr-thumbs');
124 $.each(data.items, function(i, item) {
125 $('<a/>')
126 .attr('href', item.link)
127 .append($('<img/>').attr('src', item.media.m))
128 .appendTo(container)
129 .data('tip', '<strong>' + (item.title || '(no title)') + '</strong><br />by: ' + item.author.match(/\((.*)\)/)[1]);
130 if (i == 4)
131 return false;
132 });
133 // add tips for the images inside the main tip
134 container.find('a').poshytip({
135 content: function(){return $(this).data('tip');},
136 className: 'tip-yellowsimple',
137 showTimeout: 100,
138 alignTo: 'target',
139 alignX: 'center',
140 alignY: 'bottom',
141 offsetY: 5,
142 allowTipHover: false,
143 hideAniDuration: 0
144 });
145 // call the updateCallback function to update the content in the main tooltip
146 // and also store the content in the cache
147 updateCallback(flickrFeedsCache[rel].container = container);
148 }
149 );
150 }
151 return 'Loading images...';
152 }
153 });
154 $('#demo-follow-cursor').poshytip({
155 followCursor: true,
156 slide: false
157 });
158 $('#demo-manual-trigger').poshytip({
159 content: 'Hey, there! This is a tooltip.',
160 showOn: 'none',
161 alignTo: 'target',
162 alignX: 'inner-left',
163 offsetX: 0,
164 offsetY: 5
165 });
166 $('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });
167 $('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });
168 $('#button-update').click(function() { $('#demo-manual-trigger').poshytip('update', 'I am a new content :)'); });
169 $('#button-disable').click(function() { $('#demo-manual-trigger').poshytip('disable'); });
170 $('#button-enable').click(function() { $('#demo-manual-trigger').poshytip('enable'); });
171 $('#button-destroy').click(function() { $('#demo-manual-trigger').poshytip('destroy'); });
172 $('#demo-live-events > a').poshytip({
173 liveEvents: true
174 });
175 $('#button-live-events').click(function() {
176 $('#demo-live-events').append(', <a title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>');
177 });
178
179 });
180 //]]>
181 </script>
182 <style type="text/css">
183 .flickr-thumbs {
184 overflow:hidden;
185 }
186 .flickr-thumbs a {
187 float:left;
188 display:block;
189 margin:0 3px;
190 border:1px solid #333;
191 }
192 .flickr-thumbs a:hover {
193 border-color:#eee;
194 }
195 .flickr-thumbs img {
196 display:block;
197 width:60px;
198 height:60px;
199 }
200 </style>
201
202
203 <!-- Neglect these files - they are used just to make the demo page prettier -->
204 <link rel="stylesheet" href="includes/demos.css" type="text/css" />
205 <script type="text/javascript" src="includes/sh_main.min.js"></script>
206 <script type="text/javascript" src="includes/demos.js"></script>
207</head>
208
209<body>
210
211 <div id="holder">
212
213 <div id="nav">
214 <h2>Demo Page Navigation</h2>
215 <ul>
216 <li class="first"><a href="#examples">Usage Examples</a>
217 <ul>
218 <li><a href="#styles">Styles (Classes)</a></li>
219 <li><a href="#form-tooltips">Form Tooltips (with varying positioning)</a></li>
220 <li><a href="#async-content">Asynchronous Loading of the Content</a>
221 <ul>
222 <li><a href="#async-simple">Simple Example</a></li>
223 <li><a href="#async-flickr-feeds">Loading Flickr Feeds</a></li>
224 </ul>
225 </li>
226 <li><a href="#follow-cursor">Following the Mouse Cursor</a></li>
227 <li><a href="#manual-trigger">API Example - Triggering the Tooltip Manually</a></li>
228 <li><a href="#live-events">Using Live Events</a></li>
229 </ul>
230 </li>
231 <li><a href="#options">Options</a></li>
232 <li><a href="#methods">Methods</a></li>
233 <li><a href="#notes">Notes</a></li>
234 <li><a href="#license">License</a></li>
235 <li><a href="#download">Download</a></li>
236 <li><a href="#support">Support</a></li>
237 <li class="last"><a href="#donate">Donate</a></li>
238 </ul>
239 <h2>Next?</h2>
240 <ul>
241 <li class="first"><a href="http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/">&laquo; Back to the Poshy Tip Page</a></li>
242 <li class="last"><a href="http://vadikom.com/">&laquo; Back to Vadikom.com</a></li>
243 </ul>
244 </div>
245
246 <div id="content">
247 <h1>Poshy Tip jQuery Plugin <span>Demo Page</span></h1>
248
249 <h2 id="examples">Usage Examples</h2>
250
251 <p>The default browser tooltip that displays the value of the <code>title</code> attribute is replaced with a "poshier" version:</p>
252
253 <!-- #demo-basic -->
254 <p><a id="demo-basic" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a></p>
255 <div class="code-block">
256 <pre class="sh_javascript">$('#demo-basic').poshytip();</pre>
257 </div>
258
259 <h3 id="styles">Styles (Classes)</h3>
260
261 <p>Using different tooltip classes is easy. Here are some examples that are included in the download package (in the "src" folder).</p>
262
263 <!-- #demo-tip-yellow -->
264 <p><a id="demo-tip-yellow" title="Hey, there! This is a tooltip." href="#">.tip-yellow</a></p>
265 <div class="code-block">
266 <pre class="sh_javascript">$('#demo-tip-yellow').poshytip();</pre>
267 </div>
268
269 <!-- #demo-tip-violet -->
270 <p><a id="demo-tip-violet" title="Hey, there! This is a tooltip." href="#">.tip-violet</a></p>
271 <div class="code-block">
272 <pre class="sh_javascript">$('#demo-tip-violet').poshytip({
273 className: 'tip-violet',
274 bgImageFrameSize: 9
275});</pre>
276 </div>
277
278 <!-- #demo-tip-darkgray -->
279 <p><a id="demo-tip-darkgray" title="Hey, there! This is a tooltip." href="#">.tip-darkgray</a></p>
280 <div class="code-block">
281 <pre class="sh_javascript">$('#demo-tip-darkgray').poshytip({
282 className: 'tip-darkgray',
283 bgImageFrameSize: 11,
284 offsetX: -25
285});</pre>
286 </div>
287
288 <!-- #demo-tip-skyblue -->
289 <p><a id="demo-tip-skyblue" title="Hey, there! This is a tooltip." href="#">.tip-skyblue</a></p>
290 <div class="code-block">
291 <pre class="sh_javascript">$('#demo-tip-skyblue').poshytip({
292 className: 'tip-skyblue',
293 bgImageFrameSize: 9,
294 offsetX: 0,
295 offsetY: 20
296});</pre>
297 </div>
298
299 <!-- #demo-tip-yellowsquare -->
300 <p><a id="demo-tip-yellowsimple" title="Hey, there! This is a tooltip." href="#">.tip-yellowsimple</a> (no background-image used for the tooltip body)</p>
301 <div class="code-block">
302 <pre class="sh_javascript">$('#demo-tip-yellowsimple').poshytip({
303 className: 'tip-yellowsimple',
304 showTimeout: 1,
305 alignTo: 'target',
306 alignX: 'center',
307 offsetY: 5,
308 allowTipHover: false
309});</pre>
310 </div>
311
312 <!-- #demo-tip-twitter -->
313 <p><a id="demo-tip-twitter" title="Follow vadikom" href="#">.tip-twitter</a> (ala Twitter)</p>
314 <div class="code-block">
315 <pre class="sh_javascript">$('#demo-tip-twitter').poshytip({
316 className: 'tip-twitter',
317 showTimeout: 1,
318 alignTo: 'target',
319 alignX: 'center',
320 offsetY: 5,
321 allowTipHover: false,
322 fade: false,
323 slide: false
324});</pre>
325 </div>
326
327 <!-- #demo-tip-green -->
328 <p><a id="demo-tip-green" title="Hey, there! This is a tooltip." href="#">.tip-green</a></p>
329 <div class="code-block">
330 <pre class="sh_javascript">$('#demo-tip-green').poshytip({
331 className: 'tip-green',
332 offsetX: -7,
333 offsetY: 16,
334 allowTipHover: false
335});</pre>
336 </div>
337
338 <h3 id="form-tooltips">Form Tooltips (with varying positioning)</h3>
339
340 <p>Adding form input field tooltips is simple. You just have to make sure they are triggered on focus/blur (i.e. <code>showOn: 'focus'</code>) and positioned relatively to the target element (i.e. <code>alignTo: 'target'</code>). The script also updates the position of such tooltips if the window is resized (e.g. show some of the tips below and resize your browser window for a demo).</p>
341
342 <!-- #demo-form-name -->
343 <p>
344 <label for="demo-form-name">Name:</label><br />
345 <input id="demo-form-name" type="text" size="30" title="Enter your name" />
346 </p>
347 <div class="code-block">
348 <pre class="sh_javascript">$('#demo-form-name').poshytip({
349 className: 'tip-yellowsimple',
350 showOn: 'focus',
351 alignTo: 'target',
352 alignX: 'right',
353 alignY: 'center',
354 offsetX: 5
355});</pre>
356 </div>
357
358 <!-- #demo-form-email -->
359 <p>
360 <label for="demo-form-email">Email:</label><br />
361 <input id="demo-form-email" type="text" size="30" title="Enter a valid email" />
362 </p>
363 <div class="code-block">
364 <pre class="sh_javascript">$('#demo-form-email').poshytip({
365 className: 'tip-yellowsimple',
366 showOn: 'focus',
367 alignTo: 'target',
368 alignX: 'left',
369 alignY: 'center',
370 offsetX: 5
371});</pre>
372 </div>
373
374 <!-- #demo-form-site -->
375 <p>
376 <label for="demo-form-site">Site:</label><br />
377 <input id="demo-form-site" type="text" size="30" title="Enter your website URL" />
378 </p>
379 <div class="code-block">
380 <pre class="sh_javascript">$('#demo-form-site').poshytip({
381 className: 'tip-yellowsimple',
382 showOn: 'focus',
383 alignTo: 'target',
384 alignX: 'inner-left',
385 offsetX: 0,
386 offsetY: 5
387});</pre>
388 </div>
389
390 <!-- #demo-form-subject -->
391 <p>
392 <label for="demo-form-subject">Subject:</label><br />
393 <input id="demo-form-subject" type="text" size="30" title="Enter a subject" />
394 </p>
395 <div class="code-block">
396 <pre class="sh_javascript">$('#demo-form-subject').poshytip({
397 className: 'tip-yellowsimple',
398 showOn: 'focus',
399 alignTo: 'target',
400 alignX: 'center',
401 alignY: 'bottom',
402 offsetX: 0,
403 offsetY: 5
404});</pre>
405 </div>
406
407 <h3 id="async-content">Asynchronous Loading of the Content</h3>
408
409 <p>Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed. The script also recalculates and updates the position of the tooltip when its content is updated.</p>
410
411 <h4 id="async-simple">Simple Example</h4>
412
413 <!-- #demo-async-timeout -->
414 <p><a id="demo-async-timeout" href="#">Update content after 1 second</a></p>
415 <div class="code-block">
416 <pre class="sh_javascript">$('#demo-async-timeout').poshytip({
417 content: function(updateCallback) {
418 window.setTimeout(function() {
419 updateCallback('Tooltip content updated!');
420 }, 1000);
421 return 'Loading...';
422 }
423});</pre>
424 </div>
425
426 <h4 id="async-flickr-feeds">Loading Flickr Feeds</h4>
427
428 <p>A more complicated example of loading some Flickr images by tags:</p>
429
430 <!-- #demo-async-flickr -->
431 <p id="demo-async-flickr"><a rel="tag-flowers-closeup" href="#">flowers, closeup</a>, <a rel="tag-sunset" href="#">sunset</a>, <a rel="tag-architecture" href="#">architecture</a>, <a rel="tag-Plovdiv-old-town" href="#">Plovdiv, old, town</a>, <a rel="tag-Nesebar" href="#">Nesebar</a>, <a rel="tag-depeche" href="#">depeche</a></p>
432
433
434 <div class="code-block">
435 <pre class="sh_javascript">var flickrFeedsCache = {};
436
437$('#demo-async-flickr &gt; a').poshytip({
438 className: 'tip-darkgray',
439 bgImageFrameSize: 11,
440 alignY: 'bottom',
441 content: function(updateCallback) {
442 var rel = $(this).attr('rel');
443 if (flickrFeedsCache[rel] &amp;&amp; flickrFeedsCache[rel].container)
444 return flickrFeedsCache[rel].container;
445 if (!flickrFeedsCache[rel]) {
446 flickrFeedsCache[rel] = { container: null };
447 var tagsComma = rel.substring(4).replace('-', ',');
448 $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&amp;tagmode=all&amp;format=json&amp;jsoncallback=?',
449 function(data) {
450 var container = $('&lt;div/&gt;').addClass('flickr-thumbs');
451 $.each(data.items, function(i, item) {
452 $('&lt;a/&gt;')
453 .attr('href', item.link)
454 .append($('&lt;img/&gt;').attr('src', item.media.m))
455 .appendTo(container)
456 .data('tip', '&lt;strong&gt;' + (item.title || '(no title)') + '&lt;/strong&gt;&lt;br /&gt;by: ' + item.author.match(/\((.*)\)/)[1]);
457 if (i == 4)
458 return false;
459 });
460 // add tips for the images inside the main tip
461 container.find('a').poshytip({
462 content: function(){return $(this).data('tip');},
463 className: 'tip-yellowsimple',
464 showTimeout: 100,
465 alignTo: 'target',
466 alignX: 'center',
467 alignY: 'bottom',
468 offsetY: 5,
469 allowTipHover: false,
470 hideAniDuration: 0
471 });
472 // store the content in the cache
473 // and call updateCallback() to update the content in the main tooltip
474 updateCallback(flickrFeedsCache[rel].container = container);
475 }
476 );
477 }
478 return 'Loading images...';
479 }
480});</pre>
481 </div>
482
483 <h3 id="follow-cursor">Following the Mouse Cursor</h3>
484
485 <p>If using the <code>followCursor: true</code> option, it's better to make sure the the slide animation effect is disabled (i.e. <code>slide: false</code>) so that it doesn't conflict with the code that moves the tooltip with the cursor.</p>
486
487 <!-- #demo-follow-cursor -->
488 <p><a id="demo-follow-cursor" title="Hey, there! This is a tooltip." href="#">Hover for a tooltip that follows the cursor</a></p>
489 <div class="code-block">
490 <pre class="sh_javascript">$('#demo-follow-cursor').poshytip({
491 followCursor: true,
492 slide: false
493});</pre>
494 </div>
495
496 <h3 id="manual-trigger">API Example - Triggering the Tooltip Manually</h3>
497
498 <p>If you like, you can add a tooltip to some element(s) and configure it to not be triggered automatically on hover or focus/blur by using the <code>showOn: 'none'</code> option. You can then control the tooltip manually via the available methods.</p>
499
500 <!-- #demo-manual-trigger -->
501 <p><a id="demo-manual-trigger" href="#">This link has a tooltip that is not triggered automatically</a></p>
502 <p><button id="button-show">Show</button> <button id="button-hide">Hide</button> <button id="button-update">Update Content</button> <button id="button-disable">Disable</button> <button id="button-enable">Enable</button> <button id="button-destroy">Destroy</button></p>
503 <div class="code-block">
504 <pre class="sh_javascript">$('#demo-manual-trigger').poshytip({
505 content: 'Hey, there! This is a tooltip.',
506 showOn: 'none',
507 alignTo: 'target',
508 alignX: 'inner-left',
509 offsetX: 0,
510 offsetY: 5
511});
512$('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });
513$('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });
514$('#button-update').click(function() { $('#demo-manual-trigger').poshytip('update', 'I am a new content :)'); });
515$('#button-disable').click(function() { $('#demo-manual-trigger').poshytip('disable'); });
516$('#button-enable').click(function() { $('#demo-manual-trigger').poshytip('enable'); });
517$('#button-destroy').click(function() { $('#demo-manual-trigger').poshytip('destroy'); });</pre>
518 </div>
519
520 <h3 id="live-events">Using Live Events</h3>
521
522 <p>You can set the <code>liveEvents: true</code> option to use live events. Note that the API methods (except 'destroy') won't work reliably in such case. They will only work for the elements for which the tooltip has been initialized (i.e. shown at least once). Live events are supported in jQuery 1.4.2+.</p>
523
524 <!-- #demo-live-events -->
525 <p id="demo-live-events"><a title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a></p>
526 <p><button id="button-live-events">Add Another Link</button></p>
527 <div class="code-block">
528 <pre class="sh_javascript">$('#demo-live-events &gt; a').poshytip({
529 liveEvents: true
530});
531$('#button-live-events').click(function() {
532 $('#demo-live-events').append(', &lt;a title="Hey, there! This is a tooltip." href="#"&gt;Hover for a tooltip&lt;/a&gt;');
533});</pre>
534 </div>
535
536 <h2 id="options">Options</h2>
537
538 <dl class="options">
539 <dt><strong>content</strong> <i>String, DOM element, Function, jQuery</i></dt>
540 <dd><div class="possible-values">Possible Values: <span>'[title]', 'string', element, function(updateCallback){...}, jQuery</span></div>Content to display.</dd>
541
542 <dt><strong>className</strong> <i>String</i></dt>
543 <dd>Class for the tips.</dd>
544
545 <dt><strong>bgImageFrameSize</strong> <i>Number</i></dt>
546 <dd>Size in pixels for the background-image (if set in CSS) frame around the inner content of the tip.</dd>
547
548 <dt><strong>showTimeout</strong> <i>Number</i></dt>
549 <dd>Timeout before showing the tip (in milliseconds 1000 == 1 second).</dd>
550
551 <dt><strong>hideTimeout</strong> <i>Number</i></dt>
552 <dd>Timeout before hiding the tip.</dd>
553
554 <dt><strong>timeOnScreen</strong> <i>Number</i></dt>
555 <dd>How long the tip will be displayed before automatically hiding.</dd>
556
557 <dt><strong>showOn</strong> <i>String</i></dt>
558 <dd><div class="possible-values">Possible Values: <span>'hover', 'focus', 'none'</span></div>Handler for showing the tip. Use <code>'none'</code> if you would like to trigger the tooltip just manually (i.e. by calling the <code>'show'</code> and <code>'hide'</code> methods).</dd>
559
560 <dt><strong>liveEvents</strong> <i>Boolean</i></dt>
561 <dd>Use live events.<br /><br />Note that the API methods (except 'destroy') won't work reliably when live events are used. They will only work for the elements for which the tooltip has been initialized (i.e. shown at least once). Live events are supported in jQuery 1.4.2+.</dd>
562
563 <dt><strong>alignTo</strong> <i>String</i></dt>
564 <dd><div class="possible-values">Possible Values: <span>'cursor', 'target'</span></div>Align/position the tip relative to</dd>
565
566 <dt><strong>alignX</strong> <i>String</i></dt>
567 <dd><div class="possible-values">Possible Values: <span>'right', 'center', 'left', 'inner-left', 'inner-right'</span></div>Horizontal alignment for the tip relative to the mouse cursor or the target element - values 'inner-*' matter if <code>alignTo:'target'</code></dd>
568
569 <dt><strong>alignY</strong> <i>String</i></dt>
570 <dd><div class="possible-values">Possible Values: <span>'bottom', 'center', 'top', 'inner-bottom', 'inner-top'</span></div>Vertical alignment for the tip relative to the mouse cursor or the target element - values 'inner-*' matter if <code>alignTo:'target'</code></dd>
571
572 <dt><strong>offsetX</strong> <i>Number</i></dt>
573 <dd>Offset X pixels from the default position - doesn't matter if <code>alignX:'center'</code></dd>
574
575 <dt><strong>offsetY</strong> <i>Number</i></dt>
576 <dd>Offset Y pixels from the default position - doesn't matter if <code>alignY:'center'</code></dd>
577
578 <dt><strong>allowTipHover</strong> <i>Boolean</i></dt>
579 <dd>Allow hovering the tip without hiding it onmouseout of the target - matters only if <code>showOn:'hover'</code></dd>
580
581 <dt><strong>followCursor</strong> <i>Boolean</i></dt>
582 <dd>If the tip should follow the cursor - matters only if <code>showOn:'hover'</code> and <code>alignTo:'cursor'</code></dd>
583
584 <dt><strong>fade</strong> <i>Boolean</i></dt>
585 <dd>Use fade animation.</dd>
586
587 <dt><strong>slide</strong> <i>Boolean</i></dt>
588 <dd>Use slide animation.</dd>
589
590 <dt><strong>slideOffset</strong> <i>Number</i></dt>
591 <dd>Slide animation offset.</dd>
592
593 <dt><strong>showAniDuration</strong> <i>Number</i></dt>
594 <dd>Show animation duration.</dd>
595
596 <dt><strong>hideAniDuration</strong> <i>Number</i></dt>
597 <dd>Hide animation duration.</dd>
598 </dl>
599
600 <h2 id="methods">Methods</h2>
601
602 <dl class="options">
603 <dt><strong>.poshytip('show')</strong></dt>
604 <dd>Manually show the tooltip. Make sure the <code>alignTo</code> option is set to <code>'target'</code> in order the tooltip to be properly positioned when you trigger it.</dd>
605
606 <dt><strong>.poshytip('hide')</strong></dt>
607 <dd>Manually hide the tooltip.</dd>
608
609 <dt><strong>.poshytip('update', content, [ dontOverwriteOption ] )</strong></dt>
610 <dd>Update the tooltip content at any time.<div class="signature"><strong>content</strong> '[title]', 'string', element, function(updateCallback){...}, jQuery<br /><strong>dontOverwriteOption</strong> (optional) A boolean flag - if set to <code>true</code> the content will be updated just temporary while the tooltip is active. The next time it is shown again, the default content will be used.</div>Examples:<br /> - Update content permanently (works even when the tooltip is not active):<div class="signature">.poshytip('update', 'New permanent content')</div> - Update content temporary while the tooltip is active:<div class="signature">.poshytip('update', 'Temporary content', true)</div></dd>
611
612 <dt><strong>.poshytip('disable')</strong></dt>
613 <dd>Disable the tooltip.</dd>
614
615 <dt><strong>.poshytip('enable')</strong></dt>
616 <dd>Enable the tooltip.</dd>
617
618 <dt><strong>.poshytip('destroy')</strong></dt>
619 <dd>Destroy completely the tooltip functionality.</dd>
620 </dl>
621
622 <h2 id="notes">Notes</h2>
623
624 <ul>
625 <li>Requires jQuery 1.4+</li>
626 <li>Works in IE6+, FF 2+, Opera 9+, Safari 3+, Chrome</li>
627 <li>In IE6 min/max-width are supported (only px values) for the tooltip container DIV so you can use them in your CSS without worrying for IE6 (if you still care about it)</li>
628 <li>When a background-image is set for the tooltip container DIV, the script will neglect the background-color/padding/border declarations set for it and will use the background image to create a scalable frame around the tooltip inner DIV (for an explanation how this works, please take a look at the <a href="http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/">Poshy Tip Page</a>)</li>
629 <li>In IE6 PNG background images are not supported (only GIF). If a PNG is set as a background-image for the tooltip container, in IE6 the script will fallback and use the background-color/padding/border declarations instead.</li>
630 </ul>
631
632 <h2 id="license">License</h2>
633
634 <p>Like jQuery, Poshy Tip is dual licensed under the <a href="http://github.com/vadikom/poshytip/raw/master/MIT-LICENSE.txt">MIT</a> and <a href="http://github.com/vadikom/poshytip/raw/master/GPL-LICENSE.txt">GPL</a> licenses.</p>
635
636 <h2 id="download">Download</h2>
637
638 <p>Download link: <a href="http://vadikom.com/files/?file=poshytip/poshytip-1.1.zip">http://vadikom.com/files/?file=poshytip/poshytip-1.1.zip</a></p>
639
640 <h3>Git</h3>
641
642 <p>The Poshy Tip source code is also available at GitHub:</p>
643 <div class="code-block">
644 <pre class="sh_html">git clone git://github.com/vadikom/poshytip.git</pre>
645 </div>
646
647 <h2 id="support">Support</h2>
648
649 <p>Post your questions/suggestions in the <a href="http://www.smartmenus.org/forum/">support forums</a>.</p>
650
651 <h2 id="donate">Donate</h2>
652
653 <p>If you appreciate this script, you can support me by <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;[email protected]&amp;no_shipping=1&amp;currency_code=USD&amp;item_name=Poshy+Tip+jQuery+Plugin+Development" rel="nofollow">donating a small amount</a> through PayPal or just by <a href="http://www.addtoany.com/share_save?linkname=Poshy%20Tip%20-%20Tooltip%20Plugin%20for%20jQuery%20-%20Vadikom&amp;linkurl=http://vadikom.com/tools/poshy-tip-jquery-plugin-for-stylish-tooltips/" rel="nofollow">spreading the word</a> about it. Your support is highly appreciated!</p>
654 </div>
655
656 </div>
657
658</body>
659</html>
Note: See TracBrowser for help on using the repository browser.