MooTools 1.2 Tips

Javascript code:

$$(.Tip).each(function(el) {
var title = el.getProperty(title).split(::);
if (title.length == 1) {
el.store(tip:title,title[0]);
el.store(tip:text,'');
} else {
el.store(tip:title, title[0].trim());
el.store(tip:text, title[1].trim());
}
});
var tip = new Tips($$(.Tip), {
className:tool-tip,
showDelay: 400,
hideDelay: 400,
onShow:function(tip) {tip.fade(in);},
onHide:function(tip) {tip.fade(out);
}
});

Tooltip css:

.tip-top {
color: #fff;
width: 139px;
z-index: 13000;
}
.tip-title {
width: 123px;
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background: url(bubble.png) top left;
}
.tip-text {
width: 123px;
font-size: 11px;
padding: 4px 8px 8px;
background: url(bubble.png) bottom right;
color:#fff;
}
.tip-text A {
color:#069;
}
.tip-loading {
background: url(ajax_load.gif) center center no-repeat;
width: 30px;
height: 30px;
margin: 0 auto;
}

Tips HTML Structure:

<div class=options.className> /*the className you pass in options will be assigned here.*/
<div class=tip-top></div> /*useful for styling*/
<div class=tip>
<div class=tip-title></div>
<div class=tip-text></div>
</div>
<div class=tip-bottom></div> /*useful for styling*/
</div>

http://mootools.net/docs/more/Interface/Tips