Effective, Elegant, and Free: Awesome Fading Tooltips
By Dave Gash |
|
Contents
Click a link below to jump to a particular section; click any "Top" image following a section heading to jump back here.
Introduction
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?
Fair Use
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.
Getting the Code
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):
- Line 87: change config.OffsetX from 14 to 3 (places tip closer to cursor)
- Line 103: change config.Width from 0 to -300 (allows script to adjust tip width but only to a maximum of 300 pixels)
In tip_balloon.js (both required):
- Line 30: change config.Balloon from false to true (makes balloon the default display type)
- Line 31: change config.BalloonImgPath from "../scripts/tip_balloon/" to "./tip_balloon/" (points scripts to balloon graphics)
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:
<body>
<script src="wz_tooltip.js"></script>
<script src="tip_balloon.js"></script>
. . .
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!)
Calling the Tooltips
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):
<p>This is a paragraph. <a href="javascript:void(0)" onmouseover="Tip('Tooltip text goes right here. It can be any length; the tooltip adjusts its size accordingly.')" onmouseout="UnTip()">This link</a> has a fading tooltip.</p>
Here's that same code in a working example:
This is a paragraph. This link has a fading tooltip.
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:
<body>
<script src="wz_tooltip.js"></script>
<script src="tip_balloon.js"></script>
<span id="Tip1">The link's onmouseover event calls the TagToTip() function with a bunch of optional arguments. (The first argument is the ID of the span that contains the tip text.) The <b>TagToTip</b> function is not in the page, but is in an external javascript file included at the top of the page.</span>
. . . (other page content, blah blah blah) . . .
<p>This is another paragraph. <a href="javascript:void(0)" onmouseover="TagToTip('Tip1')" onmouseout="UnTip()">This link</a> has a fading tooltip using a remote element as the tip text.</p>
Here's that same code in a working example:
This is another paragraph. This link has a fading tooltip using a remote element as the tip text.
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:
<p>This is a paragraph. <a href="javascript:void(0)" onmouseover="Tip('Tooltip text goes right here. It can be any length; the tooltip adjusts its size accordingly, but there should be enough text here to see the justify take effect.', TEXTALIGN, 'justify')" onmouseout="UnTip()">This link</a> has a fading tooltip. The tooltip text should be justified.</p>
And here’s that code in a working example:
This is a paragraph. This link has a fading tooltip. The tooltip text should be justified.
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:
<p>This is yet another paragraph. <a href="javascript:void(0)" onmouseover="TagToTip('Tip1', BALLOON, true, FADEIN, 400, FADEOUT, 400, ABOVE, true, WIDTH, 260, PADDING, 8, TEXTALIGN, 'justify', OFFSETX, 5)" onmouseout="UnTip()">This link</a> has a fading tooltip using a remote element as the tip text.</p>
And of course, the working example:
This is yet another paragraph. This link has a fading tooltip using a remote element as the tip text.
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!
Thank You...
...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
|