【锋利的JQuery-学习笔记】Tootip（提示框）

<div id="jnNotice">
<div id="jnMiaosha">
<a href="#nogo" class="JS_css3"><img src="images/upload/20120216.jpg" alt="冬品清仓"  /></a>
</div>
<div id="jnNoticeInfo">
<h2 title="最新动态">最新动态</h2>
<ul>
<li><a href="###1" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
<li><a href="###2" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
<li><a href="###3" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
<li><a href="###4" class="tooltip" title="[活动] 伊伴春鞋迎春大促">[活动] 伊伴春鞋迎春大促</a></li>
<li><a href="###5" class="tooltip" title="[活动] 千百度冬靴新品火热让利">[活动] 千百度冬靴新品火热让利</a></li>
<li><a href="###6" class="tooltip" title="[活动] COEY秋冬新品全场2.3折起">[活动] COEY秋冬新品全场2.3折起</a></li>
</ul>
<br class="clear" />
</div>
</div>

/* 最新动态 */
#jnNotice{
float: left;
height: 321px;
overflow: hidden;
width: 230px;
}
#jnMiaosha {
float: left;
height: 176px;
margin-bottom: 10px;
overflow: hidden;
width: 230px;
}
.JS_css3 img {
-webkit-transition:1s all;
-moz-transition:1s all;
-o-transition:1s all;
transition:1s all;
}
.JS_css3:hover img {
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
transform:rotate(720deg);
}
#jnNoticeInfo {
float: left;
border: 1px solid #DFDFDF;
height: 133px;
overflow: hidden;
width: 228px;
}
#jnNoticeInfo h2 {
height: 23px;
line-height: 23px;
border-bottom: 1px solid #DFDFDF;
text-indent:12px;
}
#jnNoticeInfo ul {
float: left;
padding: 6px 2px 0 12px;
}
#jnNoticeInfo li {
height: 20px;
line-height: 20px;
overflow: hidden;
}
#jnNoticeInfo li a{
color:#666666;
}
#jnNoticeInfo li a:hover{
color: #008CD7;
text-decoration: none;
}
/* 品牌活动 */

$(function () {
var x = 10;
var y = 15;

$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";

var tooltip = "<div id = 'tooltip'>" + (this.myTitle !=null ?this.myTitle:"") + "</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");

}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
});

});