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! πŸ™‚

31 Comments

  • Stephen Hill says:

    This looks really good and I tried to implement it into a web application I'm currently writing, however, my existing javascript files use an AddEvent function to execute multiple onload events.

    Eg:

    addEvent(trhover);

    addEvent(searchbox);

    Which will fire those functions when the page has finished loading.

    How can I incorperate your class in a similar fashion?

    Cheers

    GK

  • 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:

    <code>

    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?

  • Stephen Hill says:

    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.

    Cheers

    GK

  • Stephen Hill says:

    PS: width: auto; works well for resizable boxes if your not using the custom borders.

    Cheers

    GK

  • Martin says:

    Cool gadget!

    Great work!

  • Robert Nyman says:

    Stephen,

    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?

    Harmen,

    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.

    Martin,

    Thanks! πŸ™‚

  • Robert Nyman says:

    Harmen,

    To elaborate on my reply: of course it shouldn't work like that, so I've fixed the GLT JavaScript file so nested elements with the <code>title</code> attribute will work as well (however, the <code>abbr</code> will not work in IE until IE 7, since they've stopped all kind on interaction on that element; you have to use <code>acronym</code> instead to make it work).

  • Robert,

    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..

  • Robert Nyman says:

    Harmen,

    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 πŸ™‚

  • Robert Nyman says:

    Steve,

    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.

  • Stephen Hill says:

    Robert,

    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.

    GK

  • Robert Nyman says:

    Stephen,

    Sounds great! Enjoy! πŸ™‚

  • Chris says:

    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.

  • Robert Nyman says:

    Chris,

    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.

  • Robert Nyman says:

    Chris,

    I've now updated the script with a fix for this.

  • Chris says:

    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 […]

  • Bob Melvin says:

    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.

  • Robert Nyman says:

    Bob,

    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.

  • Michel says:

    It is a very nice tooltip, but is it also possible that the title moves when the cursor moves?

  • Michel says:

    Is it also legal to add functions and make changes to your code?

  • Robert Nyman says:

    Michel,

    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 […]

  • Goulven says:

    Hi!

    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.

    this.titleTopImage.setAttribute("class", "glt_top");

    this.titleBottomImage.setAttribute("class", "glt_bottom");

    Hope that helps!

  • Robert Nyman says:

    Goulven,

    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. πŸ™‚

  • Goulven says:

    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.

  • Robert Nyman says:

    Goulven,

    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.

    Nasty copy-and-paste error you found there. I have now removed it in the GLT JavaScript file.

  • meee says:

    hello. thanks for the GLT script!
    unfortunately it doesnt work in FF3.5 on SVG shapes, while in IE7 it works on SVG shapes.

  • Sean Sidi says:

    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?

    thanks

    sean

Leave a Reply

Your email address will not be published. Required fields are marked *