Monday, December 12, 2011

The Right and Wrong Way to Use Tooltips

The wrong way to use tooltips
I recently visited the web site of a large corporation whose stores I sometimes visit. I was looking for—what else?—information. The site, which will remain nameless here, uses the HTML TITLE attribute to display tooltips for each of its menu entries. As far as it goes, that is commendable.

Tooltip repeats link text
As you can see, however, the tooltip for the top-level menu item does two things that detract from the visitor's experience:
  • First, the tooltip merely repeats the text from the visible link. This adds nothing to the visitor's understanding of the underlying link. Why would you pop up a box to tell me what I already see on the page?
  • Second, the TITLE attribute displays the popup text just below where the cursor is placed when you mouse over the linked text. So, the tooltip obscures the next menu item in the list. This makes it harder to scan the list.

Tooltip obscures next menu item
If you move your mouse cursor down two or three menu items on this company's web page, you see the same result.

In the second image, I moved my mouse farther to the right on the link, and that moved the tooltip farther to the right, making it possible to read the links below it. But, if a user runs the cursor down the left margin, the tooltip is going to interfere with reading each new menu item, one after the other.

The proper use of tooltips
I'll make two fairly simple suggestions for better use of tooltips or similar methods to display help text on an HTML page:
  1. If you use tooltips, provide new information not already visible on the page (to see an actual example, mouse over "HTML" earlier in this paragraph). 
  2. Take care where you place your tooltips. Leave them off altogether, if they're not necessary or, if they are, move them down and to the side. Make an effort not to obscure the very next line of text.
The choice of placement of the tooltip text is not possible using the TITLE attribute. But you can place the popup text where you want to on the page using Javascript or CSS techniques.

Using CSS hover selector
The example to the right is taken from a page on one of my web sites. When you mouse over the text links, the popup boxes are placed where I choose them to be: lower than the standard tooltip. This allows the next line to be scanned as you move down the page. The popup text boxes are placed on the page by the code, not by the position of the cursor. Also, I prefer to tell the visitor what they're likely to see or if the linked files are especially large. Some internet users still struggle with slow connections, so they prefer not to click on huge files.

The power to use web pages to connect and communicate with other people, including customers, is incredible. Don't detract from your communication by supplying useless information that adds nothing to comprehension and also takes away from the user's experience. Make your communications more effective by using tooltips as they were intended to be used—or don't use them at all.

No comments:

Post a Comment