Cover by Cody Lindley

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

13.1. Creating Custom Tool Tips

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.

Solution

To solve this problem, we can use jQuery to get the mouse position within our area of interest on the page and then dynamically place a <div>

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required