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