Let’s face it, creating documentation and manuals stinks. I would much rather put my writing skills to use for this blog or a million other creative endeavors than create a users manual that explains the obvious. But how do you explain what information should go into what field in a form page without creating a corresponding help page or user manual? Tooltips.
Tooltip Example

Certain programming environments like .Net have simple support for tooltips, which is decent place to start if you are using that environment. But what if you want something that is a bit more universal or isn’t tied down to a particular tool. That’s where Walter Zorn’s tooltips can be a big help. I’m going to give a few examples and also am including a PHP convenience function that you can add to your web application tool set.

The first thing you’ll want to do is download a copy of Walter’s tooltip script. download wz_tooltip.

Next extract the zip and place wz_tooltip.js in your scripts directory or the home directory of your application.

Then include the file in your HTML document that has form labels or other text where you want to add tooltips. It should be placed right after the <body> tag in your document.

Now add a tooltip to an item on your page, by creating a “OnMouseOver” event. This triggers the tip to show whenever the visitor mouses over your item.

  
  
My Simple Form

View this example.

Now to make things a lot easier in when building a web application, I suggest creating a function in whatever language you are using. In my case I’m using PHP, so my function might look like this:

function tooltip($tip, $title, $text)
{
   $tTooltip = ''.$text.'';
   return $tTooltip;
}

This way whenever I need a tooltip, I just call this function in my application. This allows for code reuse and avoids duplicate code, in case you want to update the way your tooltips look across the application. You can also call this function within other functions that generate forms and links.

Make user friendly applications in a way that is friendly to you. Skip an unnecessary documentation step and add friendly contextual help as you go with tooltips.