Another tooltip with different styles.
And am image: 
This is a small demo of tooltip.js
tooltip.js is very flexible as you have total control over the tooltip element
More information here
The relevant source looks like this
<head>
<title>tooltip.js - A lightweight prototype based JavaScript tooltip</title>
<script src="/files/tooltip/prototype.js" type="text/javascript"></script>
<script src="/files/tooltip/tooltip-v0.2.js" type="text/javascript"></script>
<style type="text/css">
div.tooltip{
padding: 5px;
margin: 5px;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<h1 title="look ma, a title attribute"<tooltip.js demo</h1>
<p>This is a small demo of <span id="trigger_1"><strong>tooltip.js</strong><span></p>
<p><span title="tooltip.js - http://blog.innerewut.de/pages/tooltip">tooltip.js</span> is very flexible as you have total control over the tooltip element</p>
<p>More information <a href="http://blog.innerewut.de/pages/tooltip" id="trigger_2">here</a></p>
<div id="tooltip_1" style="display:none; padding: 10px; background-color: red;">
<strong>tooltip.js</strong> is a lightweight prototype <br /> based JavaScript tooltip.
<span style="color: blue">This is blue</span>
</div>
<div id="tooltip_2" style="display:none; padding: 15px; width:200px; height:200px; background-color: blue;">
<p>Another tooltip with different <em>styles</em>.</p>
<p>And am image: <img src="icon.gif" alt="a sample image" title="a sample image"></p>
</div>
<script type="text/javascript">
var my_tooltip_1 = new Tooltip('trigger_1', 'tooltip_1')
var my_tooltip_2 = new Tooltip('trigger_2', 'tooltip_2')
Event.observe(window,"load",function() {
$$("*").findAll(function(node){
return node.getAttribute('title');
}).each(function(node){
new Tooltip(node,node.title);
node.removeAttribute("title");
});
});
</script>