document updated 12 years ago, on Sep 8, 2011
Requirements
Alright. Finding tooltip nirvana is harder than I thought.
Are my needs so hard to fulfill? Is the only path to nirvana forgetting my needs?
- Be able to have EASY-TO-USE plain-text tooltips, as well as full-fledged HTML tooltips.
- CASCADE — Individual tooltips can be in one of two modes: 1) normal tooltip mode, where mouseout results in the tooltip going away, and 2) "cascade" mode, which lets you move your mouse over to the body of the tooltip and click on links that are INSIDE the toolip
- Before you say "that's too difficult! many tooltips don't do this!"... this has long been possible USING ONLY CSS. It is totally doable, and is a well-explored problem.
- CHAIN — Tooltips should be able to have tooltips EMBEDDED INSIDE THEM. Read the "only CSS" link above, and you see that tooltips and dropdown-menus have some similarities. THIS requirement is what unifies them — if you can chain tooltips, then you effectively have a drop-down menu. (again, this is a well-explored and totally-doable thing)
- really, if you have CASCADE, you can do CHAIN automatically (as long as you can specify full HTML for the innards of a tooltip)
- AUTOPOSITION — A tooltip's width, height, and x/y position should be automatically figured out by the tooltip library. You can get an idea of how this works by looking at the BeautyTips demo, and trying to make it pop-up when the originating box is scrolled to be near the top of the window, or near the bottom.
- other details:
- the tooltip should NEVER need a "close" button — rather, the user should be able to navigate into it simply by making sure the mouse stays over the tooltip, and navigate out of it by moving the mouse outside the tooltip (this is EXACTLY how every pop-up menu works)
- rather than having a fancy the tooltip shouldn't need a fancy arrow / connector / whatever... the tooltip should be an unadorned box that's nestled against the current object will work fine
- instead of the fancy arrow/connector/etc, the initiating element should have its :hover or :active style applied (just like pop-up menus.... notice a pattern here?)
- the tooltip should be static, it shouldn't move around after opening, it shouldn't follow your mouse (just like pop-up menus)
Design
There are two pieces to this:
1) Something to calculate the size of the inner content, before we pop it up.
2) Something that automatically decides which position it should pop up at, so that it avoids the sides of the browser window, when scrolling, etc.
Design: 1) determine size
jQuery already includes this functionality, since it's needed for slide(). See here for more, or search for the variable "cssShow" in the jQuery source code.
Design: 2) determine position
Shouldn't be too hard, really?
Implementation
Non-minified versions of other tooltip implementations, to learn techniques from:
My own project?
If I end up having to create my own (because I can't find any existing code that works):
- it should be called "Grand Unified Tooltips (GUT)", as an allusion to the Grand Unified Theory (GUT).