Learning jQuery

In the jQuery universe, Cody Lindley is probably most known and loved for his Thickbox, a lightbox technique that "can show html pages as well as images … pulled from the server using AJAX" (cf. Thickbox - One Box to Rule Them All). However, he has also created another useful plugin called jTip, a light-weight AHAH tooltip solution with some nice options. As Lindley explains:

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Also jTip can be customized by providing user defined widths (defaults to 250px wide) via a url query string. The height is liquid and stretches to match the content that fills the tool tip. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user. See the Yahoo link in the demo for a working example.

A Few Changes

When Rey Bango asked the jQuery Discussion List for some help with updating the plugin, I jumped at the chance. Together — and with assistance from others on the list — Rey and I made the following changes:

1. The hide() method is added to the mouseout to correct an issue with Firefox
2. An iframe is inserted to correct IE's problem with select boxes always getting top billing for z-index. The iframe is styled to cover the select box while remaining transparent, based on the CSS at <SELECT>-Free Layer
3. If JTip appears to the left of the element hovered over, and if the JTip is too wide to fit entirely within the document window, its width decreases to the widest possible without having any of it cut off.
4. The JTip position moves up if it's initially cut off at the bottom of the viewable area, and moves down to the top of viewable area if its height is greater than that of the document window.

One Small Problem

There is only one small problem still unresolved: In Firefox 1.5.x, when the jTip's link is close to the bottom of the viewable area, the jTip flashes below the viewable area for a split second before appearing in its optimal position. If the page doesn't already have a vertical scrollbar, one will quickly appear and then disappear. There must be a way to prevent this annoyance, but I haven't figured it out yet. I first load the jTip with its contents, then get its height, and finally show it — a sequence that should avoid the problem. And it does work in other browsers, just not Firefox. Oh well, I'm still learning. The good news is that the set of circumstances necessary to produce the problem would hardly ever happen on my sites. Still, if anyone out there has a suggestion, I'd love to hear it.