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
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! 🙂
Which will fire those functions when the page has finished loading.
How can I incorperate your class in a similar fashion?
Nice one, Robert!
I'm currently re-organising my own website and I was actually looking for a new, more stable Tooltip script. This might be it 🙂
Tell me, does it handle stuff like this:
Click this link to learn more about <abbr title="Cascading Style Sheets">CSS</abbr></code>
Which title will it display when someone mouses over the abbreviation inside the link?
Sorry, please ignore my above comment. It wasn't working because I didn't put the styles into my style sheet *slaps head*.
This works really well and I now being use in my web app 🙂
One bug though: alt tooltips in IE still display as well as displaying the custom one for the title.
PS: width: auto; works well for resizable boxes if your not using the custom borders.
I guess everything works fine for you now then? 🙂
Regarding the bug: I'm not sure I regard it as a bug but rather as a faulty technical implementation in IE to display values in the <code>alt</code> attribute as a tooltip. It's no big feat to suppress this in IE as well, but should I do it? What does everyone think?
Good question. The way it works now, it will always show the tooltip for the containing element, and never the tooltip for the <code>abbr</code> element in your example.
thanks a lot! I asked because the Tooltip script on my site gave some ugly erros when used in such a situation. I will be using your script in future projects 🙂
About IE's faulty <code>alt-</code>attribute behaviour; I'm not sure if you should fix that.. I personally only correct IE in places that really make a difference and leave tiny imperfections alone (us webdevelopers ain't IE's babysitters, are we? ;)). On the other hand; it's not a huge addition to your code when you do correct this and it makes your script look even fancier..
No problem, it's in my own interest to deliver as good a script as possible. 🙂
Regarding IE and the <code>alt</code> attribute: I'll wait till tomorrow to see if anyone else has got an opinion about that. If not, I will take necessary precautions to "fix" that as well.
Sounds great, and if it supressed IE's annoying habit of displaying alt attributes, it would make me want to use it on just about every site I build 🙂
Well, that's it then! If you use it on every web site you build I have to meet your needs. 🙂
I have now implemented one more setting for GLT: <code>suppressAltTooltipsInIE : true</code> and leave it up to you to do what feels most appropriate.
Good to hear that you've solved the IE issue with the alt tag. This really solves thumbnail images where I would include the alt tag for accessibility reasons and the title tag to work on other browsers other than IE.
I also think the fix for nested tags is good and I'm glad to see people are defining acronym's properly :).
It's a bit late in the day now but I will update my script with yours tomorrow and give it a twirl :D.
Sounds great! Enjoy! 🙂
Your tool tips might look good. But they are partly invisible in my narrow little 1024 width Firefox browser. This forces me to scroll to the right to see what the tooltip says; horizontal scrolling really annoys me, it's like being back on an inadequate 800×600 monitor. Surely there must be some way to correct this? Frankly (phew! I almost mistyped and called you 'Franky' back there) they don't really add much to the quality of your already excellent site, and it all merely seems like gimmicky self-indulgence.
The only scenario where I can make that happen is if the link is just on the right hand side of the screen. I agree that it can be annoying and it's just about a small fix to the script (when I have the time).
However, I don't really share your opinion it being merely self-indulgence, because I do think it does add to the web site looking nicer and more pleasant to use.
I've now updated the script with a fix for this.
Great. Everything is fixed and, as you say, it does make the site look good. As for the bit about self-indulgence, I accept that this was not the primary reason for the tooltips. But even if it had been, there's no need to apologise for it. It's your website; enjoy it :))
[…] Minor bug fix for GLT Published on Thursday, October 19th, 2006 With GLT, a side-effect happened in Firefox when using GLT for any link; the status t […]
Minor bug in the GLT code: In showTitle, the variable fadeInTitle should be used in the "if" clause. Currently, the "if" clause always evaluates to true.
I'm currently experiencing a major problem with Firefox on the Mac: Using fade in/fade out, all the text on the page is affected by setting the opacity of "titleElm". All is okay in Opera. GLT does not work at all in Safari.
Thanks for catching that! I've updated the code at the GLT web page.
I know about text rendering weirdness in Firefox on Mac, and basically, it seems to be due to their poor text handling in general. In this case, I guess since it uses the <code>opacity</code> CSS property.
Not sure what problems you have in Safari, it works fine for me there.
It is a very nice tooltip, but is it also possible that the title moves when the cursor moves?
Is it also legal to add functions and make changes to your code?
It is a deliberate decision not to move it around, because it, in my opinion, is greater usability. You are free to change and adapt the code to your liking where you use it, as long as it's not a web site where you chare the end users.
[…] Blue uses Gravatar and GLT. The Elucid Blue logotype is ITC Franklin Gothic; headlines are powered by […]
I finally got the opportunity to make use of GLTs, and figuring out how to adapt it is a real pleasure with such beautiful code. Thanks a lot!
Just a minor suggestion: to make styling even easier, I'd rather use CSS completely. As a quick fix, I've added classes to the images on top and bottom. Here's the code I changed, around lines 42 and 50.
Hope that helps!
Thanks for the compliments! I like the idea of class names instead, although I could go either way. However, I would recommend not using <code>setAttribute</code> but instead <code>className</code>, as in <code>this.titleTopImage.className = "glt-top"</code>.
This is for greater compatibility and, well, the way it should be. 🙂
Warning: if the element whose tooltip is currently displayed is removed from the DOM, the tooltip remains "locked". This doesn't happen very often though.
I think calling showTitle() should maybe "reset" the tooltip to avoid this issue, for instance by calling hideTitle.
As an aside, I see that around line 72 the script uses a GLT property called "clickDocumentToClearFocus" and a FaT object, but these are not defined in the script.
Man, you can't call me on this code, I can't remember it. 🙂
I agree about the risk that there will be a lock if the element is removed. Should be a very uncommon scenario, though.
hello. thanks for the GLT script!
unfortunately it doesnt work in FF3.5 on SVG shapes, while in IE7 it works on SVG shapes.
Very nice tooltip script and I am very eager to use it; however, I seem to be having trouble viewing the tooltip when used on a fixed element at the bottom of my webpage. As a result, the user is forced to scroll down in order to see the tooltip. I understand this was fixed for elements positioned on the right side of the page. What about the bottom?
Is there a way of positioning the tooltip above the target element?