Result

jQuery

$(document).ready(function () {

    // サムネイル
    $('div.thumbnail-item').mouseenter(function(e) {
        // ツールチップの位置情報
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
        // z-indexを追加し、class="tooltip"のpositionの値を決める
        $(this).css('z-index','15').children("div.tooltip").css({'top':y + 10,'left': x + 20,'display':'block'});

    // マウスムーブイベント
    }).mousemove(function(e) {
        // ツールチップの位置情報
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
        // class="tooltip"のpositionの値を決める
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

    // マウスが離れたらイベント発火
    }).mouseleave(function() {
        // 元に戻す
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");//フェードアウト
    });
});

css

.thumbnail-item {
    position: relative;
}
.thumbnail-item a {
    display: block;
}
.tooltip {
    display: none;
    position: absolute;
}

html

<div class="thumbnail-item">
    <a href="javascript:void(0);"><img src="small.png" width="100" height="100" class="thumbnail" /></a>
    <div class="tooltip">
        <img src="big.png" alt="" width="330" height="330" />
    </div>
</div> 

via

Useful and Practical jQuery Image ToolTips Tutorial | Queness