ツールチップは、案外簡単に実現することが出来ました！

HTML・CSSソース

a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。
CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。

<a class="tooltip" href="http://web-park.org">サンプルテキスト<span class="tooltipCont">ツールチップで表示される内容</span></a>

.tooltipCont {
	display: none;
	position: absolute;
	z-index: 100;
	padding: .5em;
	background: #cef3ff;
	font-size: 80%;
	color: #000;
	text-decoration: none;
}

Javascriptソース

$(function(){
	//各tooltipクラスの動作設定
	$("a.tooltip").each(function(){
		var content = $(".tooltipCont" , this);

		//mousemoveイベントの動作設定
		$(this).mousemove(function(event){
			$(content).css({
				top : event.pageY + 15,
				left : event.pageX + 15
			});
		});
		
		//hoverイベントの動作設定
		$(this).hover(function(){
			$(content).stop(true , true).fadeIn(300);
		}, function(){
			$(content).css("display" , "none");
		});

	});

});

Javascriptソースの解説

4行目

tooltipクラス内のtooltipContクラスを取得しています。

7 – 12行目

マウスのポインターからのtopとleft位置を取得しています。

15 – 19行目

16行目でtooltipContクラスを表示させています。
stop(true , true)を記述することで、アニメーションをループさせないようにしています。

サンプル

こちらのサンプルでは、画像表示もさせています。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryで作るマウスに追随するツールチップ