Creating a tool tip - alt or title

Creating a tool tip - alt or title

The presence of tooltips is an easy way to improve your page's usability without creating unnecessary noise. Jakob Nielsen, the usability guru, is all for it (

So, how is a tooltip created?

The latest browser versions use the "title" attribute. This attribute can, actually, be used with almost any element, namely links and images, where it's, probably, more appropriate. Some older browsers use the "alt" attribute, but this is a mis-implementation of the standard.

I've just tested with the IE6, IE7, Firefox 2.0 and Opera 9.2, and I believe you're safe using the "title" attribute.

To use this attribute in Service Studio, create an extended property for the intended element, which might be an image, expression, link or table cell (table headers), and put "title" as name and the content in the value.

There is a limitation on Mozilla browsers, like Firefox, where the tooltip is displayed in one line only, and with a maximum of 90 characters, so avoid long tool tips. A 90 characters string is about this:
"A good use of title is to describe the destination of links, if itself is not clear enough."

The title content only allows simple text, with no formatting whatsoever. This might be troublesome at times, so a CSS-based tool tip alternative might be used. More news on this topic, soon.

A good article on this:
Hi Gonçalo,

Recently I've had some feedback from a customer that said he had trouble visualizing that kind of tooltip. There is, in fact, a problem with it since sometimes you hover the mouse icon over the object and no label appears. I believe this has something to do with the current focus of the page, but I'm not sure how to replicate this. What I know is that you have to click the mouse somewhere on the page and then the hovering behaviour will function as expected... the problem is, end-users don't know this...

So, what I'm asking is if you of anyone here know of any alternatives to this? Some javascript functions/ libraries that might ease this behaviour and allow for a better end-user usability... Those could also provide the CSS implementation that you refer on the previous post...

Pedro Gonçalves