How to Create Friendlier Pages Using Tooltips

Well-designed tooltips can provide instant user aid so that you spend less time supporting the application and more time creating new code. These users prefer detailed tooltips that define precisely how to interact with the control in question. Today applications see use by unskilled users who want only to accomplish the task that the application is designed to do as quickly, efficiently, and easily as possible.

In fact, the user would simply prefer not to see the application at all — only the completion of the task matters. No matter how hard you try, however, some users require additional help to use even the simplest application, and that’s where tooltips can come to your aid.

At one time, you could create relatively complex applications and depend on users to have the knowledge required to use them. In fact, complex applications often received the admiration of the user because the user could appreciate the skill required to create them.

Tooltips serve a number of incredibly important purposes. The most important purpose is to make the page accessible to those with special needs.

For example, most screen readers used by those who have special visual needs will describe the page using the tooltips you provide. A description is necessary because the user may not even be able to see the page. Imagine having to hear every tooltip on a page, however, when those tooltips are long and rambling. This group of users prefers concise, but descriptive, tooltips.

In many cases, tooltips also provide the means to document a page. A user sees changes you make to a page through the tooltips you create. Fellow developers also rely on the tooltips to better understand the design decisions that you make when creating the page.

Understanding the page is a requirement if you want to obtain the best possible input from users and receive knowledgeable feedback from your peers. With this in mind, you want to provide tooltips that are as accurate as possible.

It’s possible to create tooltips that have all of these characteristics using the standard HTML title attribute. For example, you can create a tooltip for an <input> tag using code similar to this:

<div>
   <label for="FirstName">First Name:</label>
   <input id="FirstName"
          title="Type just your first name."
          type="text"
          maxlength="40" />
</div>
<div>
   <label for="LastName">Last Name:</label>
   <input id="LastName"
          title="Type just your last name."
          type="text"
          maxlength="40" />
</div>

When the user hovers the mouse over these text controls, the individual control displays a tooltip that says, “Type just your first name.” or “Type just your last name.” The text appears in a small pop-up box that lacks any title or controls. The text itself can be hard to read because most browsers use a small font.

So the very people that the tooltip is supposed to help can’t read it, which is a problem.

The default tooltip works to an extent, but you can do better. The jQuery UI library provides the means to create tooltips that offer a bit more than the standard tooltip.

For example, you can react to tooltip events and add style information to the tooltip so that you can emphasize it. To use the jQuery UI library, you must add the appropriate references to the top of the page as shown here:

<script
   src="http://code.jquery.com/jquery-latest.js">
</script>
<script
   src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">
</script>
<link
   rel="stylesheet"
   href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

Creating a readable font is probably the most important thing you can do. Start with some styles like this:

<style>
   .OptionalField
   {
      font-family: serif;
      font-size: medium;
      color: blue;
   }
 
   .RequiredField
   {
      font-family: sans-serif;
      font-size: large;
      font-weight: bolder;
      color: red;
   }
</style>

These two styles make the tooltips more readable. They also make it possible for you to differentiate between optional fields and required fields. A user can see instantly when a field is required and will begin to rely on this cue when working with your application.

Here is the jQuery UI code used to apply these styles to the tooltips:

$(function()
  {
      $("#FirstName").tooltip(
         {
            position:
            {
               using: function(position, feedback)
               {
                  $(this).addClass("OptionalField");
               }
            }
         });
 
      $("#LastName").tooltip(
         {
            position:
            {
               using: function(position, feedback)
               {
                  $(this).addClass("RequiredField");
               }
            }
         });
  });

In both cases, the code assigns a style to the tooltip. You can do a lot more with tooltips than the code shows, but this is a great starting point for any page. It provides everything most users need. Here is how an optional tooltip appears onscreen.

image0.jpg

A required field uses a larger font and a different color to attract the user’s attention. Here is how a require tooltip appears onscreen.

image1.jpg

Using this simple technique greatly increases the value of tooltips to the user with only a small additional investment in time on your part. Tooltips are an essential part of usable sites. Make sure you create effective tooltips that meet the needs of all classes of user.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.