GLT - Good-Looking Tooltips
Updated September 27th 2006
Apparently Opera’s claim to support document.all in conjunction with not mimicking it exactly like IE led to some problems in Opera 9 when I use my getElementsByAttribute function. Thanks to Ash Searle who tipped me about this and also explained what the problem was. The code in the JavaScript file to download has been updated.
Also, Harmen asked an interesting question about nested elements with the title attribute. It didn’t work initially, but now I’ve updated the GLT JavaScript file with support for that as well.
Updated September 28th 2006
I did some thinking how to address the faulty technical implementation in IE to display values in the alt attribute as a tooltip, and if I should suppress it on images that have a title attribute as well. I decided to implement a setting for it and then it’s up to you to choose. The GLT JavaScript file now contains one more setting: suppressAltTooltipsInIE : true.
Updated September 29th 2006
I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.
Updated October 1st 2006
Just as Chris commented, the script didn’t consider if the custom tooltip would disappear if it was positioned too far to the right. It is now updated with a fix for this.
Updated October 19th 2006
A side-effect happened in Firefox when using GLT for any link; the status text wasn’t shown in the web browser status field. This issue has now been addressed.
Updated October 25th 2006
Just as Jordan Ambra pointed out to me, there were cases when you could mouse out from the element just when the GLT element was shown, and making it stick and not fade out. This was just because of a tiny typo by me in the code, but it has now been fixed.
Updated January 5th 2007
Bob pointed out a typo of me in the code, where the result was that you couldn’t turn off the fading in through the fadeInTitle property. The code has been updated and can be downloaded in the GLT web page.
Updated April 15th 2007
Added an extra check to prevent any eventual error that occurred when hovering a GLT element in the middle of the loading of the page.
As of lately it seems like I’m giving you a new JavaScript library every second day. But don’t worry, I will be fairly busy in the upcoming months so this one is probably the last one for a while. 
Anyway, tooltips in a web page, maybe more commonly known as what will be displayed when using the title attribute on an element, have some shortcomings that I wanted to address.
The two biggest disadvantages of a tooltip displayed for an element are:
- You can’t control what it will look like.
- You can’t control when and how it will appear and respectively disappear.
Therefore I created GLT - Good-Looking Tooltips. All you need to do is include the JavaScript file in your web page and GLT automatically detects every element with a title attribute present. It then suppresses the showing of this attribute and instead displays a good-looking tooltip designed totally to your liking and in line with the rest of the web page it’s being used in.
You can also control whether it should fade in/out for a nice smooth interaction effect. More settings and tweaking options can be found in the implementation instructions.
Accessibility
Since it it based on the existing title attributes and just builds on that, it will be totally accessible to everyone, but instead used just as a nice progressive enhancement for those with JavaScript support.
Internet Explorer considerations
When developing GLT and the other JavaScript libraries of lately, I discovered some additional hasLayout bugs in IE. When moving your mouse pointer over an element it will trigger a mouseout event on that element when moving over any of the child elements. So far, everything is in order.
What one wants then is to check if the current element that got focus is the child of the element one is tracking onmouseover and onmouseout on. Basically, this is to prevent the tooltip from being hidden if any of the child elements of the one with the title attribute got focus.
But in IE, trying to find out if the child element is the element that got focus, through checking the IE-specific toElement property, resulted in the actual parent element of the element if any of the child elements were inline elements.
I then tried to automatically add height: 1%; in the script to trigger hasLayout on the element with the tooltip, but this resulted in some totally unexplainable padding being added to the element in question… It turned out that that triggering hasLayout on-the-fly wasn’t a good nor stable solution so I decided not to.
If all this is confusing to you, just remember that if you use GLT to have a nice tooltip for an element with a lot of inline children, remember to use CSS to trigger the hasLayout mode in IE for that element then.
Enjoy your new fancy tooltips now!
