このサイトとMooToolsのTipsのコードを少し読めばすぐわかります。後はいつものようにFirebugとかで動的に作成されるエレメントを探ってCSSを設定です。
ということでサンプルコード。

// Wait for the content ...
window.addEvent("domready", function() {
    // Create tooltips
    var as = [];
    $$("dl#listsToTooltip dd a").each(function(a){
        if (a.getAttribute("title")) as.push(a);
    });
    var myTips = new Tips(as, {
        maxTitleChars: 25,
        onShow: function(tip){
            tip.fade("in");
            tip.setStyle("opacity", "0.8");
        },
        onHide: function(tip){
            tip.fade("out");
            tip.setStyle("visibility", "hidden");
        },
        offsets: {'x': -10, 'y': 15}
    });
});
 

ID名が「listsToTooltip」というdl要素内の、さらにdd要素内のaタグにツールチップ処理をつけていくというものです。
このときにツールチップ内に表示される項目はタイトルとしてaタグのtitle属性、テキスト（内容）としてhref属性またrel属性の値が使用されますが、後者はrel属性を優先的に使用します。rel属性の定義がない場合にhref属性を使います。
あとは、表示されたとき（onShow）や隠すとき（onHide）に好きな処理を入れていくだけです。setStyle()でしているのは表示／非表示の操作で、fade()でしているのはフェードイン・アウトの処理です。

これがロード時に実行されるわけですが、その後ドキュメントの最後尾にdiv要素を1つ作成します（以下、例）。

<div style="position: absolute; top: 379px; left: 255px; visibility: hidden; opacity: 0;">
    <div class="tip-top"></div>
        <div class="tip">
            <div class="tip-title"></div>
            <div class="tip-text"></div>
        </div>
    <div class="tip-bottom"></div>
</div>

これに対してCSSをつけていけばOK。


もうひとつこれの優れているところ。
属性値を表示使っているので、画像の表示はできないかなとか思いながらも以下のようなコードをツールチップの対象となるデータにつけて見ました。

<a href="#" class="bookmark" rel="000000" title="&lt;img src='./images/image1.png' width='75' height='30' alt='image1' title='image1' /&gt;">DaFont<small>http://www.tom-gs.com/</small></a>

これがすごいことに動いたんですね。ツールチップ上に画像が表示されました。
ちなみにJavaScriptのDOM関数で動的に生成するものの場合は、エンティティではなく、通常のタグのように入れるほうがいいみたいです。

var img = document.createElement("img");
img.setAttribute("title", "<img src='./images/image1.png' width='75' height='30' alt='image1' title='image1' />");