Our friend, the humble 'title' attribute

Earlier this evening, I got an e-mail from Pops asking me how I created the little tooltip-style comment text that appears when you hover over links in my posts. I ended up giving him what was probably far more information than he was expecting, but I also figured that it was information worth posting here, on the off chance it might help someone else out.

It’s actually a really easy trick, though not one built into TypePad. Simply add a title declaration to the link itself. For instance, if I wanted the text “Three martinis and a cloud of dust” to appear when someone hovered over a link to Pops’ site, I’d code it like this:

<a href="http://2hrlunch.typepad.com/" title="Three martinis and a cloud of dust">Two Hour Lunch</a>

The end result looks like this (hover over the link to see the title attribute in action):

Two Hour Lunch

That little title attribute comes in wonderfully handy, too, as it can be applied to just about any HTML tag there is.

For instance, good HTML coding includes alt text for all images, so that if someone has image loading turned off in their browser, or if the image fails to load for any other reason, there will be some descriptive text to tell them what gorgeous vistas they are missing. However, in most browsers the only time that text shows is if the image doesn’t load. Using the title attribute in addition to the alt attribute when adding images, we can create that same style of comment when someone hovers over the image. For example:

<img src="lalala.gif" width="360" height="252" alt="NOTICE: I'm not listening!" title="La la la la la la!" />

That way, when displayed in the browser, if the image didn’t load, the text ‘NOTICE: I’m not listening!’ would show instead. In addition, the text ‘La la la la la la!’ will appear if someone lets their cursor pass over the image. Not a necessary thing, but it can be fun for quick, pithy little comments. Here’s the example:

Another place I use title tags fairly regularly is when I make changes to a post after it’s first posted. HTML includes two tags (<ins> and <del>, for insert and delete, respectively) for marking up changes to text. When I go back in to edit a post after it first appears on my site, I use those tags with a title attribute to indicate when the change was made.

For example, suppose I posted the following:

Pops is a screaming loony, who shouldn’t be allowed within twenty yards of anyone who isn’t equipped with body armor and a machete.

Later, coming to my senses, I could change that like this:

Pops is a <del title="7/30/03 10pm: I think I was on drugs when I wrote this.">screaming loony, who shouldn't be allowed within twenty yards of anyone who isn't equipped with body armor and a machete</del> <ins title="Here's what I meant to say...">great guy, whose website has pointed me to some fascinating tidbits on a regular basis</ins>.

(I hope Pops doesn’t mind the sample text here.) ;)

On screen, after the update, the deleted text would display as struck through, and the inserted text would display underlined (standard editing notation), with the comments displaying on a cursor hover, like this:

Pops is a screaming loony, who shouldn’t be allowed within twenty yards of anyone who isn’t equipped with body armor and a machete great guy, whose website has pointed me to some fascinating tidbits on a regular basis.

So there ya go — more information on the humble little ‘title’ attribute than you probably ever wanted or needed to know. I hope it helps!

Update: (See? There’s a title attribute right there!) As of this writing, the title attribute is barely supported in Apple’s new web browser, Safari. Titles on links will appear in the status bar at the bottom of the window if the status bar is turned on, but that’s it. No other title text will be visible. I’m hoping that this is fixed in a later update to Safari, but for the moment, that’s what we have to work with.