- Brad Choate sent some changes to make the positioning work correctly when a title's element is in something absolutely positioned, and to handle <ins> elements.
- Peter Janes fixed nicetitles so that they work in XHTML.
- This code is released under the MIT licence.
- A fix to stop titles remaining on the page when you open a link in a new window, courtesy of Paul McLanahan.
- Minor hack by me to ensure that titles don't appear off the right border of a page.
- Minor hack by me to make it work on links with images in (2007-05-08) at Vigdor's prompting (and many, many other people over the last four years or so)
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?
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