提示框如何实现

需求如下：
页面有一个table，鼠标在其中的一个td上悬停3秒就把这个td内容的详细信息在鼠标下方出现一个div中显示；
当鼠标移开该td，div隐藏。效果类似Eclipse的焦点查询功能；这个功能用js如何实现，用jquery更好。
求高手指教

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

试试这个，那个浮动显示的就你自己写了
    <script type="text/javascript">
    $(function(){
        $("#tab td").mouseover(function(){
            this.delay = setTimeout(function(){
                //显示你的东东
            }, 3*1000);
        }).mouseout(function(){
            //隐藏你显示的东东
            clearTimeout(this.delay);
        });
    });
    </script>
怎么取得td的内容呢？我取是null啊
还有我的table是用jqgrid.js生成的；而且页面有很多table怎么确定是我需要提示的table的td呢
$(function(){
        $("td").mouseover(function(){

            this.delay = setTimeout(function(){
                //显示你的东东
                alert($(this).html());
            }, 3*1000);
        }).mouseout(function(){
            //隐藏你显示的东东
            clearTimeout(this.delay);
        });
    });
$(function(){
        $("td").mouseover(function(){

            this.delay = setTimeout(function(){
                //显示你的东东
                alert($(this).html());
            }, 3*1000);
        }).mouseout(function(){
            //隐藏你显示的东东
            clearTimeout(this.delay);
        });
    });怎么取得td的内容呢？我取是null啊
搞那么麻烦 HTML 的基本标签都不会用。
<td title='要显示的内容'>.....</td>
<div id="div" onmouseover="waitShow(this, 1)" onmouseout="waitShow(this, 2)">简介</div><script>
var time = k = 0;
function waitShow(div, type){
if(type == 1){
if(k < 0){
k = 0;
return false;
}
time += 0.5;
setTimeout("waitShow(div, 1)", "500");
if(time >= 3)div.innerHTML = "详细内容";
}else{
k = -1;
time = 0;
div.innerHTML = "简介"
}
}
</script>
呵呵，弄错了，应该将div换成td
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title> </title>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <script type="text/javascript">
  
  </script>
  <style type="text/css">
    #tips{position: absolute; width: 200px; border: 1px solid #B0B0B0; background-color: #FAFAAB; display: none; padding: 5px;}
  </style>
</head>
<body>
  <div>
    <table>
     <tr>
     <td></td>
     </tr>
     <tr>
     <td></td>
     </tr>
     <tr>
     <td onmouseover="showTips(this.innerHTML,event)" onmouseout="hidTips()">提示信息</td>
     </tr>
    </table>
  </div>
  <div id="tips"></div>
</body></html>
我的table是脚本插件生成的不能加id，怎么取得td的内容呢；
还有怎么确定弹出div的位置，要在td的下方。
求解~~~
我试过了，如果你快速滑过；
onmouseover延迟执行，onmouseout直接执行了；
过3秒onmouseover执行的时候就会弹出div来；
不信你自己试
额.不好意思.疏忽了..改一下function showTips(msg,event){
        var x = event.clientX+document.body.scrollLeft;
        var y = event.clientY+document.body.scrollTop;
        tips.timeId = setTimeout(function(){
            var tips = $("tips");
            if(tips){
                tips.innerHTML = msg;
                tips.style.cssText = "left: "+x+"px; top: "+y+"px; display: block;";
            }
        },3000);
    }
    function hidTips(){
        var tips = $("tips");
        if(tips){
            clearTimeout(tips.timeId);
            tips.style.display = "none";
        }
    }
我的table是脚本生成的，外面还套了一个table；
怎么把事件加上去？怎么取得td里面的内容？
插件生成的table里没有title属性啊。
要是自己写的td就方便多了。
JQGrid的单元格，你取到了就好办了，那是一个郁闷的东西啊！
自己再设置下td的title就可以了
<script type="text/javascript">
function setTdTitle()
{
  var tds=document.getElementsByTagName("td");
  var len=tds.length;
  for(var i=0;i<len;i++)
  {
     tds[i].title=tds[i].innerHTML;
  }
}
window.onload=setTdTitle;
</script>
jqgrid的单元格就是取不到；
还要往上面加事件
头疼