ツールチップ表示をjQueryでオリジナル化

titleタグを使わずにspanタグでツールチップに表示したい文章を入れておきます。

spanタグは非表示にしておいて、マウスオーバーしたときに表示する。
CSSバージョンもあります。＞＞＞CSSでツールチップを表示します。

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>

[tooltip.js]JavaScript

$(function(){
   $("span.tip").prepend("<img src=\"point.gif\" alt=\"\" />").css({
			 position:"absolute",
			 display:"none"
			 });
   $("a.tip").mouseover(function(){
				 $("+span.tip",this).show();
				 }).mouseout(function(){
					  $("+span.tip",this).hide();
				 }).mousemove(function(e){
					 $("+span.tip",this).css({
						   "top":e.pageY+40+"px",
						   "left":e.pageX+-10+"px"
					   });
			 });
   });

HTMl

<p>ツールチップ表示の<a href="#" class="tip">デモリンクはここ</a><span class="tip">ここにツールチップテキストをいれる</span>です。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>
<p>
ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。<br />
ツールチップ表示のDEMOぺーじです。ツールチップ表示の<a href="#" class="tip">デモリンクはここ</a><span class="tip">ここにツールチップテキストをいれる<br />
ここにツールチップテキストをいれる</span>です。<br />ツールチップ表示のDEMOぺーじです。ツールチップ表示のDEMOぺーじです。</p>

CSS

span.tip {
    padding: 5px;
	color:#000000;
	text-decoration:none;
    background-color:#FFFFCC;
    border: 1px solid #69F;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 9999;
	background:#FFFFCC url('point.gif') no-repeat -10px -10px;
}
/* 矢印位置 */
span.tip img{
	position:absolute;
	top:-10px;
	left:10px;
}