CoolMints' ToolTips

<h3>What?</h3> 
   <p>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.</p>
  <h3>How to implement?</h3> 
  <ol> 
  <li>Paste the script into the head section.<br> 
   <br> 
   <code>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;<br> 
&nbsp;&nbsp;function displaytip(){<br> 
&nbsp;&nbsp;&nbsp;&nbsp;o=(o=window.event || arguments.callee.arguments[0]).srcElement
|| o.target;<br> 
&nbsp;&nbsp;&nbsp;&nbsp;j=o.attributes[&quot;tiptext&quot;];<br> 
&nbsp;&nbsp;&nbsp;&nbsp;if(!j &amp;&amp; o.parentNode.attributes) j=o.parentNode.attributes[&quot;tiptext&quot;];<br> 
&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;tooltips&quot;).innerHTML=(j?j.nodeValue:&quot;&quot;);<br> 
&nbsp;&nbsp;}<br> 
&nbsp;&nbsp;window.onload = new Function(&quot;document.body.onmouseover=displaytip&quot;);<br> 
&lt;/script&gt;<br> 
   </code></li> 
  <li>Make an element with id <code>tooltips</code>.<br> 
  </li> 
  <li>Add a <code>tiptext</code> attribute to the elements you want to
   have a tooltip. <br> 
  </li> 
  </ol> 
  <h3>How does it work?</h3> 
  <p>If the mouse is moved, the <code>displaytip</code> function checks if
  the underlaying element has a <code>tiptext</code> attribute. <em>(If
  not, it tries using the <code>tiptext</code> attribute of the parent element. For
  example: a paragraph containing a link.) </em>The value of this attribute
  is set as <code>innerHTML</code> of the <code>tooltips</code> element.
  If no <code>tiptext</code> has been found, the <code>innerHTML</code> is
  emptied.</p> 
  <h3>Why this <em>unconventional</em> code writing style?</h3> 
  <p>To make the code as compact as possible, without having a messy code.
  A brief explanation:</p> 
  <p><code>o=(o=window.event || arguments.callee.arguments[0]).srcElement
   || o.target;</code><br> 
  This duality is because Netscape does not have the <code>window.event</code> 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 <code>srcElement</code>;
  in Netscape, this is <code>target</code>.</p> 
  <p><code>j=o.attributes[&quot;tiptext&quot;];<br> 
  if(!j) j=o.parentNode.attributes[&quot;tiptext&quot;];</code><br> 
  The attribute <code>tiptext</code> is stored in <code>j</code>. If this
  attribute doens't exist, the <code>tiptext</code> attribute of the parent
  element is stored in <code>j</code>.</p> 
  <p><code>document.getElementById(&quot;tooltips&quot;).innerHTML=(j?j.nodeValue:&quot;&quot;);</code><br> 
  The <code>innerHTML</code> of the <code>tooltips</code> element is set
  to the value of the <code>tiptext</code> attribute, if present. Otherwise,
  the <code>nodeValue</code> element is cleared.</p>
  <p><code>window.onload = new Function(&quot;document.body.onmouseover=displaytip&quot;);</code><br>
  This line assigns the <code>displaytip</code> function to the <code>onmouseover</code> 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.</p>
  <p><strong>Have fun, and if you like it: vote for this code!</strong></p>
Upload