After looking into a few of the tooltip libraries, I've ended up
implementing clueTip (http://jquery.com/plugins/project/cluetip/) on an
existing project. In general it fit in very well, with pretty nearly all
the features we need. The only real issue was [7], which I didn't manage
to work around.
This post is a little long, but I just want to share my experience, and
provide a little feedback to hopefully make the library even better!
All-in-all, I found this library to be the most feature complete, so
great job Karl!
~ ~ David
PS: Some of the books on your Amazon list look interesting :)
--- *Usage* ---
1] On the demo page, I'd suggest that the simplest case (from a library
user perspective) is actually a link with a tip provided in the title.
It took me quite a while to work out how to do this, as the hint
attempted to get loaded from the title element as if title was a URL. My
problem was that I was trying to use "attribute" to set my hint text,
not *titleAttribute*.
However after I figured it out I did find the appropriate documentation,
just scattered around a little. Here's the new demo I'd suggest adding
as number 1, simple case:
<a id='e' href="http://xxxx"; title="My title|my hint">abc</a>
jQuery('#e')
.cluetip({
titleAttribute:'title',
splitTitle:'|'
});
2] Next demo you might add is a hint with no title.
<a id='e' href="http://xxxx"; title="|my hint">abc</a>
jQuery('#e')
.cluetip({
titleAttribute:'title',
splitTitle:'|',
showTitle: false;
});
3] It looks like adding a hint to an element, and then hovering over the
target changes the cursor to a 'question-mark arrow'. That's fine,
except when combined with the ability to turn off hints, when elements
which were hovered over retain the question-mark cursor, which seems odd
to users, now that hints are off.
I'd suggest returning the cursor state to it's original value on
mouseout. That way when hints are later turned off all is well.
4] You might consider adding a means of removing hints from elements (or
simply document the workaround). I accomplished this by simply adding an
onActivate handler:
jQuery( element )
.cluetip({
onActivate: function(e) {
return false;
}
});
5] Consider adding a top/bottom arrow pointer for use with
positionBy:'bottomTop'.
6] The left/right arrow appears very specific to putting the arrow in
the top left/right corners. It would be nice to be able to put the arrow
in the center, so it might be used in conjunction with the bubble type
style.
One way to do this might be to provide a means of replacing the tl.gif
and bl.gif classes with their top/bottom or left/right equivalents. This
would fix [5] as well.
--- *Possible Bugs* ---
7] positionBy 'auto' appears not to work. The hint does not seem to
accommodate the viewport scrolling. The other positioning methods work
fine though. (I'm using the latest dimensions -- the one provided in the
clueTip download.)
8] When shrinking the window, the hint for elements on the right side
gets moved over to the center of the window, too far from the target
element.
-- *Documentation* ---
9] The Demo Page seems to have Known Issues and Downloads at the bottom
-- not sure that's meant to be there.
10] On the details page you mention that hints can fade in, but it takes
a little digging to find out *how* to do this (it's on the API page).
11] Example 5 shows how hints can be turned off. However the code in the
download does not include the onActivate parameter required to make this
happen. I found a copy in SVN which has this in it, so presumably the
doc is a little ahead of the production code. Took a while to work out
what I was doing wrong though :)
In the meantime, I simply copy/pasted the few lines required for this
functionality from svn.
