* A tip for building tool tips
Continuing with my current DHTML obsession, today I have a really excellent, simple to use, piece of code that provides the most flexible and sophisticated tool tips I’ve seen. (Just to make sure we’re all talking about the same thing, tool tips are pop-up boxes that appear when the mouse crosses a link.)
Named Tipster https://www.twinhelix.com/dhtml/tipster/, the code was written by Angus Turnbull of TwinHelix Designs.
It is a really nice piece of engineering. To start with, it is an object-oriented design, which makes programming with it much easier. Tips can be added to any object that supports onmouseover and onmouseout and the data for the tips can be stored in an external file or coded inline.
You can have multiple tip systems on every page and define the position and dimensions of each tip using formulae with tips being constrained by the browser window’s borders.
Tips can be static (for example, appearing on the right of the window) or they can track the mouse around the screen. Tips can use advanced HTML formatting, you can control how “sticky” they are (that is, how they follow the mouse) and under IE6 and Netscape 6+ on Windows as well as Safari 1.2+ under Macintosh tips can fade in and out at variable rates.
What really appeals to me is the potential of using Tipster tips as multilinks – menus of links that turn a link into a directory of links. For example, if you were discussing Network World the words “Network World” could be a multilink tip. Mousing over could provide a list of links to “About,” “News” and “Newsletters” rather than just taking you to the home page. While this technique could be easily overused, controlled use and careful placement of multilinks can make a much more effective and information rich presentation.
Impressively, Tipster is compatible with IE4+, Mozilla, Netscape4, and Opera7 under Windows as well as Safari 1.0, IE5, and Netscape 4 under Macintosh and rated as “untested, probably works” with IE4 and Mozilla under Macintosh as well as Opera7 on other operating systems and Konqueror under Linux. Only Opera 5 and 6 are incompatible with Tipster (they don’t support replacing the HTML content of page elements) and you can forget about it working with v3.x browsers.
Tipster is available as either free with attribution, or for a small donation, attribution isn’t required. I’d recommend donating. If this is the caliber of what Turnbull can do we want to keep this guy coding!
Check out Tipster’s features and demo: https://www.twinhelix.com/dhtml/tipster/demo/
