Can you give me a hint?

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.


  1. Great Idea....

    ...Hi Jake

    Love this idea. Real innovation. I think I will be using this idea in my current intranet application. Keep up the good work with the site!

    Talk 2 ya soon.

  2. Excellent

    Excellent tip/idea. After figuring out where to put the style, it worked like a charm. Thanks a million.

    Mike Werner Paris, France

  3. Great idea!

    This is something that I can implement in an intranet environment!

  4. Adding some bells and whistles...

    First, great tip Jon.

    My problem is I hate having 'long' HTML format strings in the middle of my text. It is very hard to read in small table cells in the Domino designer. Also, if I want to change any of them, I have to search through the form to find each <SPAN> pair.

    So, I decided to use this tip with two simple JavaScript functions to make the HTML format string shorter. It also has the benefit of making it dynamic and reusable.

    First, I write my span tags using an only a unique ID <SPAN ID="HP">Home Phone</SPAN>

    Next, I have 2 JavaScript functions in the JS Header. The first (setTitle) is a utility to set the TITLE and CLASS for a specific element. * This function is browser specific.

    The second function (loadTitles) is used to call setTitle for all the ID's I need to populate.

    function setTitle(id,title,tclass){ var tspan=document.all[id] tspan.className=tclass tspan.title=title }

    function loadTitles() { setTitle("HP","Please enter your home phone number.","tip") }

    Last, add loadTitles() to the onLoad event.

    This may seem like extra work, but now I can change all my titles in one place (loadTitles function). It also makes it easier to make standard messages and combine messages. For example, here loadTitles has a privacy statement that can be added to any field.

    function loadTitles() { var privacynotice="\nWe will not share this information with anyone." setTitle("WP","Please enter your work phone number."+privacynotice,"tip") setTitle("WA","Please enter your work address."+privacynotice,"tip") setTitle("HP","We will give this to anyone who asks.","tip2") }

    This same logic (using JavaScript to set the TITLE property) can be used to change the title on the fly. For example, after a user selects a radio button with Home or Work options, you could switch the title on any address fields to be specific to their selection.

    1. Who's Jon?

      Did you mean me? Not that I shall hold it against you as I like the people who use this response for what it was intended: Adding value and NOT asking silly questions....

      Cheers anyway Dick ;) Jake

  5. I used it in views


    I used it in a view where I show only 20 characters of the title of documents and used the acronymn tag to to show the full title.

    It works great.

    Thanks Patrick

    1. Don't tell Iris.

      I've been doing similar things for a while now. Looks like Iris have done the same in the Notes.net Café as well. They have a limited Title showing in the view and then the first line of the Body as a Pop-Up. Lord knows why. It makes it almost unusable (IMHO).

      Thanks for the feedback, Jake

  6. ermmmmm

    erm - i dont see any lines on IE 5 (win2k) must be a 5.5+ thing afaik..

    1. Re: ermmmmm

      Woops. You're right, it doesn't work in IE5. Must be a 5.5 thing. Thanks for letting me know. I shall correct the article right now....


  7. Tool tip for Hotspot on Image


    I have an single big image on the PAGE,I have added several hotspots on the image(texts on image). My users can't make out that they have click on the texts on image,so they need tool tip for each hotspot.so when they move on the screen and if the cursor appears on any hotspot,they get tool tip message.

    Could you pls help on this ?


    1. Re: Tool tip for Hotspot on Image

      Try giving the hotspot a "title" attribute. Like this:

      <a href="gohere?Open" title="There is a link here">

      Here's an example link. Hover over it and you should see a hint like box.

      [<a href="http://www.codestore.com" title="Can you stick it?!">codestore.net</a>]


  8. Excellent

    I used the tip and it ROCKS!!

    1. not so fast... Re: ermmmmm

      actually it works fine on IE 5 for Macs, just not for PCs.

      (I think IE 5 on Macs is actually equivalent to 5.5 on Windows, but M$ didn't want to name them the same, since 5 came out on the Mac before 5.5 came out on the PC.)

Your Comments


Navigate other articles in the category "Forms"

« Previous Article Next Article »
Experience isn't always everything   Simple multi-lingual forms using Domino

About This Article

Author: Jake Howlett
Category: Forms
Keywords: tip; help; popup;


Print Friendly

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »