Creating Balloon Help with JavaScript
By Chris Baron
Recent versions of Windows and MacOS contain little popup hints, known as "ToolTips" or "Balloon Help," that present a textual message explaining a control's function when the mouse pointer is held over it. HTML doesn't afford such luxuries, but with a little help from JavaScript, you can provide users with a reasonable facsimile. The script presented here was originally developed for my book
Drag 'n' Drop CGI: Enhance Your Web Site Without Programming (Addison-Wesley, 1997), which I co-authored with Bob Weil.
The script provides two hint options, both of which may be used on a single HTML page. The first is a simple status-line hint of the kind most commonly seen on the Web today. The hint text appears in the browser status line instead of the hyperlink destination normally displayed there. It appears for a programmable length of time and then disappears. The second hint style puts the hint message in a popup "hint window," a small browser window with the browser controls turned off. You can set the background color to a nice yellow for a Windows ToolTip look. Using a diminutive browser window rather than the irritating JavaScript alert() function affords full HTML control over the appearance of the hint-window contents. The script provides several options for getting rid of the hint window once it has served its purpose.
The Script
