Creating sweet tooltips

This is a simple example about how you can get cool Tooltips.
When you skim through any link in the page, a tooltip will be displayed showing the title of the link in the top and the link itself in the bottom.

Broadly speaking the operation is done as following

A check for DOM support is performed;
If found the title and href attributes of links are extracted from the page and they're injected into a DOM structure;
When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed.

Here are the requirements (Please find the code here)

JavaScript file containing all needed functions to do the stuff;
A CSS file for tooltip presentation;
A single image in gif format for the Tooltip;
Some lines to add on your HTML file in the head section of the page.

In the head element we will add the following code:

<script type="text/javascript" src="Tooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

Let's look now more closely at how tooltips works. We have an invisible markup which is added to the page with the help of the DOM when the mouse is over a link. The generated markup is:

<span class="tooltip">
<span class="top">TITLE of the link</span>
<b class="bottom">URL of the link [max 30 chars]</b>
</span>

The tooltip is positioned by JavaScript depending of the mouse position. The rest of the CSS styling this display is here:

.tooltip{
width: 200px; color:#000;
font:lighter 10px/1.5 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 10px 0;
background: url(tooltip.gif) no-repeat top}

.tooltip b.bottom{font:bold;padding:3px 8px 15px;color: #668B8B;
background: url(tooltip.gif) no-repeat bottom}

Hope you enjoy!