Can you give me a hint?

Jake Howlett, 2 September 2001

Category: Forms; Keywords: tip help popup

How long have I been using HTML now? At least 4 years. Yet I still seem to learn of new tags all the time. How long can it take to learn the lot? After all there are only 91 of them in the standard W3C HTML 4 specification. Examples of those that had escaped me for years include <cite>, <blockquote>, <code> and <pre>. All useful in their own little way. Not so much in every day Domino development, but when you start to write articles like this they can save time and fingers.

Today I learnt of <abbr> and <acronym>. Neither of them are supported in NN4 and the latter only in IE4+, OP4+ and NN6. Let's see to what effect we can use the <acronym> tag.

What it would be nice to do:

Anything that makes an application easier for the end user to get to grips with has to be a good thing. This is normally a case of making it as much like what they are used to as possible. Take for example the Windows Help system and the words that are underlined in little green dots. This indicates to the user that if they click it it will tell them a little more about what that term means in a small popup ToolTip, like in Figure 1.

Figure 1. Window Help

Wouldn't this kind of thing be useful on most of our web applications too. How though? Recently I was asked to add a help message for every field on a form. I opted for a link next to each one that used the JavaScript alert() method each time they clicked the "help" link. Never was quite 100% happy with this though as it involves two mouse clicks and mouse movement = hassle for the user. You can see an example of exactly how "bad" it was here.

Doing it in the browser:

The two tags we talked about earlier, <abbr> and <acronym>, are intended for things like search engines and speech synthesisers so they can make sense of the page content. We can also use them to mimic the above functionality. Both tags accept an attribute called "title" that is used to give the full meaning of each. In the browser when you hold the mouse over a word for long enough it will display a similar looking tooltip like in Figure 2. Opera 5 takes it one step further and shows the text on the status bar as well, which is nice.

Figure 2. Tooltip in Internet Explorer.

Not everything is an acronym though is it. It's a good job we can use the title attribute in a <span> tag as well then isn't it. We'll have a look at this later. All we need to do now is make it more obvious to the user that the text in question holds this extra information. Using a little CSS we can then get it to look like that in Figure 3 where the text has a dotted underline. What you can't see in this screen-grab is that the mouse has changed in to the help cursor and shows a question mark.

Figure 3. Styled tooltip in Internet Explorer.

How do we do this then:

I used screenshots in the above examples so as not to exclude users of browsers that don't support this from the discussion. The rest of the article uses examples so you may not be able to appreciate it without a decent browser. Let's look at a form that uses these tips on its field labels:

Your PIN number:
Your Support ID:

To do this we simply add Pass-Thru HTML to the form in the place you want the help to appear. So for the first field from above we use:



Your <acronym title="Personal Identification Number">PIN</acronym> number:

and for the second field where the help is not for an acronym and is more general:



Your <span class="tip" title="The ID you were given when you first called the support line">Support ID</span>:

Notice that the span tag had a class attribute assigned to it but the <accronym> tag did not. This is because we can change the style of all <accronym> tags and assume they are always tips, whereas we only want to do it for <span> tags specified as "tips". All we need do then is add the following CSS definitions to the form. See! I'm using it already ;)

abbr, acronym, .tip {

 border-bottom: 1px dotted #00cc33;

 cursor: help;

}

This simply tells all <abbr> and <acronym> tags and those tags with a "tip" class assigned that the icon is the help icon and that they are to be underlined with green dots (IE5.5+, OP5+ and NN6+).

Et, voila. There you have it. Nice and simple but the user/manager/team-mate will doubtless be very impressed.