ToolTip（图片文字） with Jquery

效果图如下：

 

 HTML代码：

    <h1>ToolTip with Jquery</h1>        
        <p>把鼠标放在<a href="http://www.cnblogs.com" class="screenshot" rel="images/bky.jpeg">博客园</a> 上.</p>
        <p>在 <a href="http://www.cssglobe.com" class="screenshot" rel="images/bky.jpeg" title="博客园">博客园</a> 上移动鼠标试试.</p>

javascript代码：

this.tooltipPreview = function(){
    var xOffset = 10;
    var yOffset = 30;
    
    $("a.screenshot").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "")?"<br/>" + this.t:"";
        $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("slow");
    },
    function(){
        this.title = this.t;
        $("#screenshot").remove();
    });
    $("a.screenshot").mousemove(function(e){
        $("#screenshot")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX = yOffset) + "px");
    });
};

$(document).ready(function(){
    tooltipPreview();
})