Edit in JSFiddle

$(document).ready(function() {
    //ホバーイベント発火
    $(".tip_trigger").hover(function(){
        //class="tip_trigger"内からclass="tip"を探す
        tip = $(this).find('.tip');
        tip.show(); //表示
    }, function() {
        tip.hide(); //非表示   
        
    //ここからマウスムーブイベント    
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //位置を取得
        var mousey = e.pageY + 20; //同上
        var tipWidth = tip.width(); //幅を取得
        var tipHeight = tip.height(); //高さを取得
        

        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);
          
        if ( tipVisX < 20 ) { //X座標を超えた場合は幅を調節
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //Y座標を超えた場合は高さを調節
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--基本は非表示--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
}
a{text-decoration:none;}
p{margin:25px;width:500px;}

<p>ツールチップのデモです。非常に簡単なコードで<a class="tip_trigger" href="javascript:void(0);">このように実装<span class="tip" style="width: 500px;"><img src="http://kachibito.net/wp-content/uploads/2010/08/wp.png" style="float: left; margin-right: 20px;" alt="" />こうやって画像も含められます。非常に簡単ですね</span></a>することが可能です。アンカータグにtip_triggerというclass名を割当てて、その後にspanにtipというclass名をあてればOK。もちろん、<a class="tip_trigger" href="javascript:void(0);">テキストのみ<span class="tip" style="width: 300px;">このようにテキストだけでもOK。汎用性の高いツールチップです。</span></a>でも問題なく、リンクも貼れます。</p>