Effective, Elegant, and Free: Awesome Fading Tooltips
Click a link below to jump to a particular section; click any "Top" image following a section heading to jump back here.
Serendipity is often used as a synonym for luck, particularly in terms of finding something you need. Properly used, though, it's more like finding something you need when youíre looking for something else, or indeed not looking at all. So it was that serendipity visited me last month.
A developer friend of mine working on a Web app for a Los Angeles client had asked if I knew of a handy script that would display small amounts of help text -- "popups, expanders, or some such hooey," as he delicately put it -- for his form elements. I promised to look through my vast library of scripts and get back to him straightaway, then resumed work on my own contract and promptly forgot about the entire conversation. Not deliberately, of course; I just didn't make a note of it. And for some reason, if I don't write things down, they forget me.
The following week I was on my mobile phone provider's site looking up some call statistics when my mouse brushed across a tiny question mark icon next to an input field, and some help text appeared. Well actually, it didn't simply appear, it gradually faded into view. And it wasn't just a couple of words, it was several lines long. And it had a border and a background color. And rounded corners! And a little pointy descender like a speech balloon! It was awesome; I was transfixed; serendipity had struck.
I wasted no time scouring the page for the code reference (you gotta love "View Source"), and thereby discovered the script I soon provided to my developer friend and here present to you. To see it in action, just hover over any of the little "Top" graphics following this article's headings. Spiffy, eh?
Now, let me first be clear about something: I did not develop this script. So lest you think I'm undertaking a bit of R&D here (that is, "Ripoff & Duplicate," according to Aussie tech pubs guru Tony Self), let me assure you that this is all completely above board. The scripts, developed and copyrighted by Walter Zorn, are freely available, published under the GNU Lesser General Public License. So no indignant emails, okay?
The other point to be made is that in this article I'll only show you how to use the script at its most basic level; by no means will I attempt to cover the inner workings or the many configuration possibilities of this wonderful, and wonderfully complex, script. In fact, Walter himself has done that quite nicely: not only are his scripts very well commented, but full documentation, including installation and configuration instructions, can be found at the main page and the extensions page. That said, let's move on.
First, you should get the original code by downloading the zip files from Walter's site. You need the core script and the balloon extension script. Unzip wz_tooltip.zip; put the extracted ws_tooltip.js in the same folder as your HTML pages. (You donít need tip_centerwindow.js or tip_followscroll.js for this exercise.) Unzip tip_balloon.zip; put the extracted tip_balloon.js and the folder tip_balloon and its contents (the rounded corners and descender graphics) in the same folder as ws_tooltip.js and your HTML pages.
To complete the setup for this exercise, you should change a couple of the default settings in each script; here's a list of what I changed after a bit of tinkering.
In wz_tooltip.js (both optional but recommended):
In tip_balloon.js (both required):
Then, just include the scripts in the HTML page in which you want the tooltips to appear. Unlike most scripts, you don't reference the external files in the head section; instead, place the references in the body section, immediately after the <body> tag, and make sure that ws_tooltip.js precedes tip_balloon.js, thus:
The location and sequence of the script references is very important, so much so that the scripts themselves will issue warning messages if you donít put them where they belong. (Whoa, that practically borders on Artificial Intelligence. Somebody call Ray Kurzweil!)
There are two ways to produce the tooltips, using different initial functions. They're both pretty straightforward, but let's tackle the simplest one first.
Using the initial function Tip(), just call the function from an element's onmouseover event and pass the tip text as a parameter. Then call the UnTip() function from the onmouseout event to dismiss the tip when you roll off the element, and you're done. Here's the code (ignore the href -- the link doesn't go anywhere):
Here's that same code in a working example:
Note: The script doesn't normally produce the balloon look by default, but recall that we told it to do so by setting the global flag config.Balloon in tip_balloon.js above. We are all about the spiff factor, after all.
Alternately, you can use a different function, TagToTip() and again, UnTip(). This function provides the ability to specify an external HTML element as the tip text. Just give the element an ID and pass that as a parameter. You might use this method if you have multiple tips in a page and want to keep them all in one place rather than scattered about at each individual link, or if you have one tip that's used multiple times, as in this page. Note that the tip text element, a plain old span sitting right there in the open in the document body, is automatically located and hidden by the script until used in a tooltip, so you don't even have to worry about it accidentally appearing on the page. Did I mention this is totally spiffy?
Here's the code for that function, including the "remote" span containing the tip text:
Here's that same code in a working example:
And thatís it. No, really.
Now, I said I wouldn't dive into the complexities of the script, but I'm bound by the Pedant's Code to at least show you one more thing. While there are many global configuration flags available in the scripts, once they're set, they're set for all tooltips. However, both functions, Tip() and TagToTip(), allow you to pass individual parameters to them to affect just that one tip instance. The parameters are passed in name/value pairs, one after the other. For example, if you want the script to fully justify the tip text, you add the config flag name TEXTALIGN as a parameter, and its value 'justify' as the next. Here's some code doing just that:
And hereís that code in a working example:
Using that technique, you can specify as many config flags as you want, to define various settings for individual links. Here's a somewhat longer example, setting the balloon shape, fade in and out speeds, tip location, width, padding, alignment, and horizontal offset:
And of course, the working example:
And that's really all you need to know to get started with this splendid script. It's a clean, elegant, easy way to provide users with relevant mini-help for virtually any page element. And it's free, thanks to the generosity of Walter Zorn and thousands of developers like him. That's the idea behind the GPL/GNU license: use, learn, enjoy!
...for reading this article! I hope you enjoyed the script presented here, and that you find it practical and useful. Remember, serendipity -- by definition -- strikes when you least expect it.
Dave Gash owns HyperTrain dot Com, a California firm specializing in training and consulting for hypertext developers. A veteran software professional with over thirty years of programming, documentation, and training experience, Dave holds degrees in Business and Computer Science, and is well known in the tech pubs community as an interesting and animated technical instructor. Dave is a frequent speaker at User Assistance seminars and conferences in the US and around the world.