CoolMints' ToolTips

				
What?
 
 
This tooltips
 do not function like the usual anoying boxes following your mouse pointer.
 When you hover over an element, information is shown in single, customisable
 spot on the page. Every element can have it's tooltip. It only takes
 one function plus a single line. The script is compatible and tested
 with Internet Explorer 6.0 and Netscape 7.1. Presumably, it will work
 on some older versions too.
How to implement?
 
 
Paste the script into the head section.
 
 
 
 <script language="javascript" type="text/javascript">
 
  function displaytip(){
 
    o=(o=window.event || arguments.callee.arguments[0]).srcElement
|| o.target;
 
    j=o.attributes["tiptext"];
 
    if(!j && o.parentNode.attributes) j=o.parentNode.attributes["tiptext"];
 
    document.getElementById("tooltips").innerHTML=(j?j.nodeValue:"");
 
  }
 
  window.onload = new Function("document.body.onmouseover=displaytip");
 
</script>
 
 
 
Make an element with id tooltips.
 
 
Add a tiptext attribute to the elements you want to
 have a tooltip. 
 
 
 
How does it work?
 
If the mouse is moved, the displaytip function checks if
the underlaying element has a tiptext attribute. (If
not, it tries using the tiptext attribute of the parent element. For
example: a paragraph containing a link.) The value of this attribute
is set as innerHTML of the tooltips element.
If no tiptext has been found, the innerHTML is
emptied.
 
Why this unconventional code writing style?
 
To make the code as compact as possible, without having a messy code.
A brief explanation:
 
o=(o=window.event || arguments.callee.arguments[0]).srcElement
 || o.target;
 
This duality is because Netscape does not have the window.event object.
I adapted this trick from http://www.javascriptkit.com/dhtmltutors/nsevents.shtml. First, the event object is stored in o. Then, the
object that has fired the event is stored, again in o. In IE, this is srcElement;
in Netscape, this is target.
 
j=o.attributes["tiptext"];
 
if(!j) j=o.parentNode.attributes["tiptext"];
 
The attribute tiptext is stored in j. If this
attribute doens't exist, the tiptext attribute of the parent
element is stored in j.
 
document.getElementById("tooltips").innerHTML=(j?j.nodeValue:"");
 
The innerHTML of the tooltips element is set
to the value of the tiptext attribute, if present. Otherwise,
the nodeValue element is cleared.
window.onload = new Function("document.body.onmouseover=displaytip");

This line assigns the displaytip function to the onmouseover event
of the body. The construction I used makes it possible to put the code
in the head part of your document, as I like to have all my scripts there.
Have fun, and if you like it: vote for this code!