i am dustin diaz

JavaScript Fading Tooltips

Wednesday Aug 31 2005

Introducing: Sweet Titles

No. It's not a knock-off from NICE Titles nor is it trying to improve on Dunstan's revised attempt. And it most definitely isn't ripped from one of those event-handler infested scripts from Dynamic Drive No. It's none of those. Instead I had two goals for this script.

1. Make the code cleaner and much more condense - with in fact - less code
2. Improve the tooltip effect

Download Sweet Titles 1.0 I feel I have achieved both and for what I would call innovating the wheel. To see a working demo just hover over any link on this website and you will be enlightened with Sweet Titles.

What's the big deal?

Well, for starters as I mentioned the code is "a lot" less than the original scripts by Stuart and Dunstan. However this is no way saying what they did wasn't great. In fact, it was freakin' awesome! Also needless to say I was in JavaScript diapers when they did it. I'm not going to compare code length because that would just be stupid and I don't want to turn this into a contest. Second, it has the cool fade in effect just like the Clagnut photo fades demo. I did, however, take out the support for Safari, although it would only add on another two lines of code. No biggie. The Fade effect does work in safari.

Tooltip Usability

One other thing to note on the difference between Sweet Titles and Nice Titles is that I cut off the URI at 25 characters for the main reason of unwanted lengthiness. My main concern is that all I really need to know is the originating domain and on average, that's what you'll find in the first 25 characters. No, there were no studies on how long the typical domain is or what users prefer to see. It was merely an educated guess that I figured was appropriate. If anyone has information otherwise, please let me know. Another cool notable feature that Sweet Titles (as well as Nice Titles) has is that the JavaScript is unobtrusive which of course as we all know, in and of itself, improves accessibility.

How do I implement this on 'my' website

Please Note: The Following instructions have been deprecated

Simple enough. Just follow these steps:

1. Download the toolTipLib.js file and add it into the head of your document. Eg: <script type="text/javascript" xsrc="http://example.com/js/toolTipLib.js" mce_src="http://example.com/js/toolTipLib.js"></script>
2. add these few functions to your js file. They include Scott Andrew's addEvent() function and other useful functions that grab Event sources, attach window events, and take advantage of event flushing to take into account for IE's memory leak. To make it simple you can just download the file and append it to your document the same way you did with the toolTipLib.js file or keep them separate the way I have them (preferred)
3. Add the following CSS to your style sheet:

   toolTip.css

   /* Fading Tooltips */
   
   div#toolTip {
   
   position:absolute;
   
   width:220px;
   
   background:#000;
   
   border:2px double #fff;
   
   text-align:left;
   
   padding:5px;
   
   -moz-border-radius:5px;
   
   z-index:1000;
   
   }
   
   div#toolTip p {
   
   margin:0;
   
   padding:0;
   
   color:#fff;
   
   font:11px/12px verdana,arial,serif;
   
   }
   
   div#toolTip p em {
   
   display:block;
   
   margin-top:3px;
   
   color:#f60;
   
   font-style:normal;
   
   font-weight:bold;
   
   }

4. Style the CSS as needed to fit your likings but be careful with the positioning (keep it absolute). And please, by all means, don't make them look like mine. Be creative! That's what this is all about anyway.

Why is the CSS separate from the JavaScript?

Because it should be. I believe keep the 'look' of the tooltip should be defined by CSS in your style sheet and not JavaScript writing out CSS. In a way it gives the developer more control and it is easier (for you) to maintain.

Why is the JavaScript in three (two) separate files!

Because keeping functions grouped separately is also what I advocate. Simply adding the event attachment functions to the toolTipLib just isn't practical when I'm going to be using them several other places throughout my site. If you like, you can put them all in one file if it's that big of a deal. I'm fully aware I could have made this more plug 'n play from the beginning, but this was a concious decision I've made on how I implement libraries. In the same manner that OpenRico extends the ProtoType library, we should all be doing similar techniques. Enjoy Your Titles!