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
Also, Harmen asked an interesting question about nested elements with the
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
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.
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.
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.
Since it it based on the existing
Internet Explorer considerations
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
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! 🙂