鼠标移上去用文本框的形式展示出单元格的值隐藏的部分

 1 <html>
 2 
 3 <div class="table">
 4 
 5 　　<ul class="row">
 6 
 7 　　　　<li>table1</li>
 8 
 9 　　　　<li>table2</li>
10 
11 　　　　<li>table3</li>
12 
13 　　　　<li>table4</li>
14 
15 　　</ul>
16 
17 </div>
18 
19 <script type="text/javascript">
20 
21 //单元格鼠标放上去出现提示框
22 $(".row").each(function(){
23 $(this).find("li").each(function()
24 {
25 $(this).hover(function()
26 {
27 var x=100;
28 var y=200;
29 this.myTitle = this.title; //把title的赋给自定义属性 myTilte ，屏蔽自带提示
30 this.title=$(this).text();
31 var tooltipHtml = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建提示框
32 $("body").append(tooltipHtml); //添加到页面中
33 $("#tooltip").css({
34 "top":(e.pageY+y)+"px",
35 "left":(e.pageX+x)+"px"
36 }).show("fast");//设置提示框的坐标，并显示
37 },function (){
38 this.title=this.myTitle; //重新设置title
39 $("#tooltip").remove(); //移除弹出框
40 }).mousemove(function (e){ //跟随鼠标移动事件
41 $("#tooltip").css({
42 "top": (e.pageY + y) + "px",
43 "left": (e.pageX + x) + "px"
44 })
45 })
46 })
47 });
48 
49 </script>
50 
51 </html>