13.2. Creating Custom Tool Tips

13.2.1. Problem

From time to time, a graphical element or interface aspect may need further clarification, but because of restraints on space (or for the sake of aesthetics), a designer might not want to take up precious screen real estate by adding explanatory text. In such a case, there is a need to provide a bit of guidance to the user, who would need it initially but whose need would diminish as familiarity with the interface grew. In such cases, a tool tip makes for an ideal solution. However, HTML leaves us with scarce resources to create a tool tip, and often the title="..." attribute does not cut it.

Tool tips can be a good solution for user interface clarification, especially if tied to some sort of dismissible user preference (i.e., “Don’t show me this again”). However, dynamic tool tips have often been abused, most notably on blogs, where every single element on a page with a title="..." attribute causes a tool tip to appear when the mouse passes over it. Such cases should be avoided, because if everything is treated as a special case via a tool tip, then the importance is diminished, and in reality nothing on the page is emphasized. It is the equivalent of shouting every single word in a sentence. Just as with any web project, the context of the content should dictate the approach, not vice versa.