Learning jQuery

Beta 2 of the clueTip Plugin for jQuery is out the door and on the server. I've made a number of fairly significant changes (for the better, I hope), both to the script and to the CSS. One notable addition is the ability to apply a "jTip" style to the clueTips by changing the CSS, setting the new "arrows" option to true and the new "dropShadow" option to false. Here is the full list of what has been changed:

Additional features/enhancements

1. the waitImage feature/option is now implemented for ajax-loaded clueTips
2. the drop-shadow effect is now created with dynamically generated div elements with decreasing level of opacity. This allows for cross-browser compatibility without having to deal with png hacks.
3. added a dropShadow option that adds a drop shadow to the clueTip. Default is true
4. the clueTip heading (<h3>) now comes before <div id="cluetip-inner">, not inside it. This should make it much easier to apply sane CSS.
5. added alternate theme based on Cody Lindley's jTip, and created demo files to show it (alt-demo.html, et. al.)
6. added an arrows option that sets the vertical background position to line up an image with the hovered element. Default is false. This option should be set to true for the alternate jTip theme.
7. <div id="cluetip"> now gets class="clue-left" if positioned to the left of the hovered element and class="clue-right" if positioned to the right. Useful for styling the clueTip differently based on where it displays, as is done in the jTip theme.

Bug fixes

1. changed $(document).width() to the more appropriate $(window).width() for positioning the clueTip's x coordinate.
2. changed the clueTip's height calculation to occur after truncate and tipTitle options are considered so that positioning will be more accurate and drop shadows will be applied correctly.
3. fixed positioning glitch when applying clueTip to an area element; now it positions the clueTip relative to the mouse position.

Still to do

1. Insert an iFrame behind the clueTip to prevent the select list from poking through in IE6.
2. Allow sticky clueTips to be closed when a user clicks anywhere else on the page.

You can still find all of the necessary files by following the links in the clueTip Beta 1 blog entry.

Update

This plugin is a work in progress, in case you couldn't tell. I've changed it a lot since posting this entry, so please refer to these pages from now on:

• clueTip Project Page at the jquery.com plugin repository. You can grab the latest "stable" release and file bug reports there.
• clueTip Info & Demo Page. You can take the plugin for a spin and learn how to use it there.