Nice titles

Nate over at webgraphics talks about a new feature he'd like to see in Safari: that titles on links should be shown in the rather pretty way that Safari currently shows dragged links:

The Safari browser showing a
partially-transparent link summary when dragging a link

That's rather nice, that. Of course, it doesn't need browser support. Try mousing over, or tabbing to, some of the links on this page: you'll see the same effect. It's all done with CSS and a little bit of JavaScript.


I don't see it!

Your browser requires good DOM support for this to work. (For example, and ironically enough, I don't know whether this will actually work in Safari itself!)

How does it work?

At the top of your page, include both the nicetitle.js and nicetitle.css files, as follows:

<script type="text/javascript" src="nicetitle.js"></script>
<link rel="stylesheet" href="nicetitle.css">

You also need to grab the background image ntbg.png, put it somewhere, and change nicetitle.css to point to it.

In accordance with the principles of unobtrusive DHTML, that's all you have to do to make it work.

Oh, you want to know what it actually does, eh? Well, it iterates through all the links on a document, and for all those with titles, it makes their title attribute a "nicetitle" attribute (so that the browser itself doesn't continue to pop up its own tooltip) and attaches onmouseout, onmouseover, onblur, and onfocus handlers to that link. The onmouseover/onfocus handler pops up a div containing the content of the "nicetitle" attribute and the link's destination. The onmouseout/onblur handler takes that div away again. (Thanks to Mark for reminding me that the effect should apply to keyboard navigation as well as mouse!) The div that pops up is partially transparent because its background is a semi-transparent PNG, which means that your browser has to support semi-transparent PNGs to get the transparent effect. (Thanks to Lars Dieckow for showing me how to create such PNGs!) The floating div is created with pure DOM methods (no innerHTML) so it should work in all DOM compliant browsers.

Updated 2006-01-13 to use the corrected addEvent function.

Stuart Langridge, February 2003

kryogenix.org | other browser experiments