Whilst writing the fault logger I came across a need for "tooltips". You know the kind, a little floaty box when you hover over a certain piece of text or icon giving extra information to the user. A small web search showed many a possibility, some free, some not so free. I eventually settled on a freeish solution until it became apparent that I'll be selling the fault logger on and I would get into issues along the line.

So, I sat myself down at the weekend, determined that this can't be as hard as it first appears. I think I have come up with a solution. All of my testing so far has shown it to work, even on an old version of netscape I had lurking on my pc upstairs.

I figured that maybe someone else would like a simple solution so I offer the files for your perusal. Enjoy, don't complain if it doesn't work (although I'd welcome any feedback, always ready to improve stuff), don't moan if there's a better way of doing things (this way works for me and, frankly, I haven't time to learn anything else at the moment) and most of all, use it if you like it with no need to pay or credit me... although if you really want to....

Installation:

1. Download the zip attachment below
2. Unzip to a directory
3. In the html file you want to include tooltips:
   • Import the ttip javascript file - the brains of the outfit...
     

     <script type="text/javascript" src="ttip.js"></script>

   • Import the ttip css file - the file that controls the look of your tooltips...
     

     <link rel="stylesheet" href="ttipStyle.css">

   • Import the ttip text file - the file that contains the text for your tooltips, you can alternatively include this code within your html file, details are given within the file itself...
     

     <script type="text/javascript" src="ttipText.js"></script>

   • Add the tooltip layer to your html document - you can place this anywhere within your document, it will be hidden automatically and moved to the right position when needed...
     

     <div id="ttip"></div>

4. Select which tag you want to link your tooltip to and add the following to it

   • onMouseOver="show(2, 20, event)"

     Where the onMouseOver is the event that will cause the tooltip to be shown. show is the function we're calling. The first argument (2) is the number of the tooltip you want to call (from your tooltip text file), the second argument (20) is the width of your tooltip, and the third argument (event) is needed by the script so just leave it

   • onMouseOut="hide()"

     Used to hide the tooltip when the mouse is no longer over the specified area - if you omit this weird stuff will happen.

5. If the above is to much hassle for you, I've included a demo html file in the zip which you can edit at your leisure and should get you up and running in a few minutes