マウスオーバーで説明書きが出る

説明書きを消すとき、hideとshowよりfadeOutとfadeInの方がいい

hideとshowの変な動き↓ななめにでてくる。
http://hinaoka.blogspot.jp/2011/09/jquery.html

▼html

<p>テキストテキストテキストテキストテキス<a href="#">てきすと</a><span class="tip">説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明</span>トテキストテキストテキストテキストテキストテキストテキストテキスト
キスト</p>

▼css

/*表示される説明のCSS*/
.tip{
background:#ff8800;
color:#ffffff;
font:10px 1.5;
border:2px solid #FC9;
padding:6px 8px;
display:block;
width:200px;
font-size:10px;
line-height:1.5;
position:absolute;
display:none;
}

※見た目のCSSが決まってから→「display:none;」

▼js

$(function(){


$(".tip").css("opacity","0.9");


$("a").mouseover(function(){
$(".tip").fadeIn("fast");
}).mouseout(function(){
$(".tip").fadeOut("fast");
}).mousemove(function(e){
$(".tip").css({
top:e.pageY+10+"px",
left:e.pageX+10+"px"
});
});});