@@ -5,13 +5,14 @@ <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>clueTip Plugin Demo</title> + <link rel="stylesheet" href="../jquery.cluetip.css" type="text/css" /> + <link rel="stylesheet" href="demo.css" type="text/css" /></head> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script src="../lib/jquery.hoverIntent.js" type="text/javascript"></script> <script src="../lib/jquery.bgiframe.min.js" type="text/javascript"></script> <script src="../jquery.cluetip.js" type="text/javascript"></script> <script src="demo.js" type="text/javascript"></script> - <link rel="stylesheet" href="../jquery.cluetip.css" type="text/css" /> - <link rel="stylesheet" href="demo.css" type="text/css" /></head> <body> <h1 id="top">clueTip : A jQuery Plugin</h1> @@ -65,7 +66,7 @@ <div class="jquery">View the jQuery</div> <pre><code>$('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});</code></pre> </li> - <li><strong>local, with arrows</strong>: This one uses local content from a hidden <code>div</code> element and displays an arrow that points to the invoking element: <a class="load-local" href="#loadme" rel="#loadme">hover for local</a> + <li><strong>local, with arrows</strong>: This one uses local content from a hidden <code>div</code> element and displays an arrow that points to the invoking element: <a id="load-local" class="load-local" href="#loadme" rel="#loadme">hover for local</a> <div class="html">View the HTML</div> <pre><code><a class="load-local" href="#loadme" rel="#loadme"></code></pre> <div class="jquery">View the jQuery</div> demo/index.html @@ -256,13 +256,15 @@ $(document).ready(function() { * http://www.gnu.org/licenses/gpl.html</p> </dd> <dt>What versions of jQuery is the clueTip Plugin compatible with?</dt> - <dd>The clueTip Plugin is compatible with jQuery v1.1.3.1 and later. jQuery v1.2.1 or later is recommended.</dd> + <dd>The clueTip Plugin is compatible with jQuery v1.2.6 and later. jQuery v1.3.1 or later is recommended.</dd> <dt>Does the clueTip Plugin have any dependencies on other plugins?</dt> <dd>Only for old version of jQuery. For jQuery versions below 1.2.3, the clueTip plugin depends on the <strong>Dimensions</strong> plugin for accurate positioning. Otherwise, it is self-contained. <p><em>Optional</em> plugins that can be used in conjunction with the clueTip plugin include <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" title="hoverIntent jQuery Plug-in">hoverIntent</a> and <a href="http://brandonaaron.net/jquery/plugins/bgiframe/docs/">bgIframe</a>.</p> </dd> <dt>How do I get clueTip to work with dynamic content.</dt> <dd>There are a number of options available for working with dynamic content. By default, the <code>ajaxCache</code> function is set to <code>true</code>. This reduces the number of http requests are made to the server. However, it doesn't account for possible changes to the ajaxed data. If the contents of a particular clueTip will be updated on the server between invocations, you may want to set <code>ajaxCache: false</code>. </dd> - <dt>Why don't my JavaScript behaviors work on elements within a clueTip?</dt> - <dd>If you expect your JavaScript to work on elements within clueTip content, in almost every case you will need to "re-bind" event handlers after the content is added to the DOM. You can do so by using the <code>onShow</code> option. <a href="http://grover.open2space.com/node/191">Shawn Grover has written a great tutorial</a> that explains how to do this. Check it out. </dd> + <dt><em>New as of clueTip 1.0.3</em>: How do I programmatically close (hide) a clueTip?</dt> + <dd>If you want to trigger a clueTip to close, based on some other interaction, you can use the following code: <code>$(document).trigger('hideCluetip');</code> </dd> + <dt><em>New as of clueTip 1.0.4</em>: Why don't the styles that I've applied to my local content carry over once they're inside a clueTip?</dt> + <dd>When using an element on the same page to populate the clueTip's content, the plugin <em>clones</em> that element. Because of potential problems caused by duplicate IDs within a page, the plugin also, by default, adds a suffix to the ID of the cloned element. If you have tied styles to the original ID, they won't be carried over. You can either give the <code>localIdSuffix</code> an empty string ( '' ) for its value or add the id to your stylesheet rule.</dd> <dt>How do I add a delay before showing or closing the clueTip? </dt> <dd>While the clueTip plugin itself doesn't have a mechanism for delaying responses, it can take advantage of the optional hoverIntent plugin. To delay the showing of a clueTip, use the <code>interval</code> property of the <code>hoverIntent</code> option; to delay its hiding, use the <code>timeout</code> property. Both properties are in measured in milliseconds. For example, the following sets both the show and the hide delays to 750 milliseconds (3/4 second): <pre><code>$('a').cluetip({ @@ -305,9 +307,10 @@ $(document).ready(function() { </div> <div id="download" class="tabContent"> <h1>Download</h1> - The clueTip Plugin is available at: + <p>The latest "stable" release of the clueTip Plugin is available at: <a class="external" href="http://plugins.jquery.com/project/cluetip/">http://plugins.jquery.com/project/cluetip/</a>. - + </p> + <p>The plugin is also available on Github, where it is updated more frequently with incremental improvements and bug fixes: <a href="http://github.com/kswedberg/jquery-cluetip/tree/master">clueTip on Github</a></p> <h1>Support</h1> <p>Support for the clueTip Plugin is available through the <a class="external" href="http://groups.google.com/group/jquery-en/">jQuery Mailing List</a>. @@ -317,9 +320,6 @@ $(document).ready(function() { If you discover a bug in the clueTip plugin, please <a href="http://plugins.jquery.com/node/add/project_issue/cluetip/bug">report the bug here</a>. (Note: if you have to be registered and logged in to report a bug. If you have not already registered, <a href="http://plugins.jquery.com/user/register">you can do so here</p>. <p>If you would like the clueTip to do something that it doesn't already do, you may <a href="http://plugins.jquery.com/node/add/project_issue/cluetip/feature">request a feature</a>. </p> - <h1>More information</h1> - <p>Read the blog entries for <a href="http://www.learningjquery.com/2007/07/cluetip-plugin-beta" title="Learning jQuery » clueTip Plugin Beta">Beta 1</a> and <a href="http://www.learningjquery.com/2007/07/cluetip-plugin-beta-2" title="Learning jQuery » clueTip Plugin Beta 2">Beta 2</a> for more information and examples.</p> - <p>The current version (0.9.x) includes some fairly major API changes, so if you're upgrading from a version earlier than 0.8.x, be sure to check out the <a href="#options">options</a>.</p> <div id="footer"> This documentation is maintained by Karl Swedberg. Send comments or questions to karl [at] learningjquery [dot] com. </div> index.html 233203c1a057ad3d1bb08005ca77e32d3613511d Karl Swedberg karl@englishrules.com http://github.com/kswedberg/jquery-cluetip/commit/86b9f8dc00a1a45ff49492036a0233331a2eade2 86b9f8dc00a1a45ff49492036a0233331a2eade2

2009-06-28T08:15:09-07:00

updated doc page and demo page 73914e96abc05a90a3a48e564faf87d38cbb7634 Karl Swedberg karl@englishrules.com