如何在文字上显示提示文字，要求和原文字重叠。100分，up 有分，谢谢！

<table border="1" >
    <tr>
        <td title = "你的提示1" >鼠标放上来看看</td>
        <td title = "你的提示2" >鼠标放上来看看</td>
        <td title = "你的提示3" >鼠标放上来看看</td>
    </tr>
    <tr>
        <td title = "你的提示4" >鼠标放上来看看</td>
        <td title = "你的提示5" >鼠标放上来看看</td>
        <td title = "你的提示6" >鼠标放上来看看</td>
    </tr>
</table>

下我的web excel 来看吧, excel/edittable.js 里面就有

【个人意见，仅供参考】
试一试这个
<table border="0" align="center" >
    <tr>
        <td tag = "好长呀好长呀好长呀好长呀好长呀好长呀好长呀" onmousemove="TipMe(this)" onmouseout="HideTip()">好长呀好长呀好长呀  </td>
    </tr>
    <tr>
        <td tag = "这个也挺长，这个也挺长，这个也挺长，这个也挺长，" onmousemove="TipMe(this)" onmouseout="HideTip()">这个也挺长，这个也挺长  </td>
    </tr>
</table>
<div style="position:absolute;border:1px solid #000000;background-color:#FFFF99;display:none;" id="divTip"><div>
<script language="javascript">
function TipMe(o){
  with(o){
  x=offsetLeft;
  y=offsetTop;
  objParent=offsetParent;
  while(objParent.tagName.toUpperCase()!=   "BODY"){
  x+=objParent.offsetLeft;
  y+=objParent.offsetTop;
  objParent   =   objParent.offsetParent;
      }
document.getElementById('divTip').innerText = o.tag;
var ts = document.getElementById('divTip').style;
ts.left = x;
ts.top = y;
ts.display = '';
}
}
function HideTip(){
document.getElementById('divTip').style.display = 'none';
}</script>

做了一个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="con">
<span sug="很长的很长的文字提示很长的很长的文字提示">文字标题文字标题</span><br /><br />
<span sug="很长的很长的文字提示很长的很长的文字提示">文字标题文字标题</span><br /><br />
<span sug="很长的很长的文字提示很长的很长的文字提示">文字标题文字标题</span><br /><br />
<span sug="很长的很长的文字提示很长的很长的文字提示">文字标题文字标题</span><br /><br />
</div>
<script>
function sug(con){
var bcon = document.createElement('div'), par = document.getElementById(con), elms = par.childNodes, css = 'font-size:12px; cursor:default; padding:1px; position:absolute; top:0; visibility:hidden; z-index:999; border:1px solid #000; background:#FEFFE0; color:#000';
bcon.style.cssText = css;
bcon.setAttribute('style',css);
par.sug = bcon;
bcon.onmouseover = function(){this.style.visibility = 'visible'}
bcon.onmouseout = function () { this.style.visibility = 'hidden'}
par.appendChild(par.sug); for(var i=0; i<elms.length; i++)
if(elms[i].nodeType == 1 && elms[i].getAttribute('sug')){
elms[i].onmouseover = function(){
vis_sug(this);
}
elms[i].onmouseout = function(){ this.parentNode.sug.style.visibility='hidden'}
}
} function vis_sug(obj){
var con = obj.parentNode.sug, val = obj.getAttribute('sug'), height = obj.offsetHeight, left=0, top = 0, tem = obj;
while(tem !== null){
left += tem.offsetLeft;
top += tem.offsetTop;
tem = tem.offsetParent;
}
con.innerHTML = val;
con.style.height = con.style.lineHeight = height - 2 + 'px';
con.style.left = left + 'px';
con.style.top = top + 'px';
con.style.visibility = 'visible';
}
onload = function(){sug('con')}
</script>
</body>
</html>

谢谢大家，mrwang2000 和 cgisir 的代码很接近，cgisir 的代码更符合我的需求。
不过，我希望提示的文字可以超越浏览器的边框，效果如下：
默认的 title 就可以超越浏览器的边框，但是就是不能和原文字重叠。

超出浏览器貌似有点难度...
自制的只是DIV.

我花了那么多力气，要给分啊，不给要打架啊 ....
<html>
<head>
<style>
#child_table{
    border-collapse: collapse;
    border: 1px solid #FFFFFF;
font-size: 13px;
background-color: #F3FAF8;
}
.spanoc_0{
display: block;
overflow: hidden;
width: 100px;
text-overflow :ellipsis;
}
.spanoc_1{
display: block;
overflow: hidden;
width: 180px;
text-overflow :ellipsis;
}
.spanoc_2{
display: block;
overflow: hidden;
width: 120px;
text-overflow :ellipsis;
}
.spanoc_3{
display: block;
overflow: hidden;
width: 80px;
text-overflow :ellipsis;
}
.spanoc_4{
display: block;
overflow: hidden;
width: 80px;
text-overflow :ellipsis;
}
.spanoc_5{
display: block;
overflow: hidden;
width: 32px;
text-overflow :ellipsis;
}
</style>
</head>
<body>
    <table id="child_table"  border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" >
        <thead class="head_tr_1" >
    <tr style="background-color: #D3EDE6;">
          <td>用户名</td>
          <td>编号</td>
          <td>通讯地址</td>
          <td>添加时间</td>
          <td>结束时间</td>
          <td> </td>
        </tr>
    </thead>
        <tr>
          <td><span class="spanoc_0">UEswerewrwerwereewrewrrrrrrrrrrrrrrrrrrrr</span></td>
          <td><span class="spanoc_1">ewrerwerwerwerwrwererwer1234</span></td>
          <td><span class="spanoc_2"> </span></td>
          <td><span class="spanoc_3">3</span></td>
          <td><span class="spanoc_4"> </span></td>
          <td><span class="spanoc_5"> </span></td>
        </tr>
        <tr>
          <td><span class="spanoc_0">123123123123</span></td>
          <td><span class="spanoc_1">ahfhafkdahkgjhkjghadskghakdjsghksdjaghdksajghdsajkghaskdgh</span></td>
          <td><span class="spanoc_2"> </span></td>
          <td><span class="spanoc_3"> </span></td>
          <td><span class="spanoc_4"> </span></td>
          <td><span class="spanoc_5"> </span></td>
        </tr>
        <tr>
          <td><span class="spanoc_0"> </span></td>
          <td><span class="spanoc_1"> </span></td>
          <td><span class="spanoc_2"> </span></td>
          <td><span class="spanoc_3"> </span></td>
          <td><span class="spanoc_4"> </span></td>
          <td><span class="spanoc_5"> </span></td>
        </tr>
    </table>
</body>
</html>
<script language="javascript">
function getInnerText( obj )
{   if( typeof(obj)!="object" )
        return;
    var txt = "";
    txt = obj.innerHTML.replace(/<([^<]*)>/g,"");
    txt = txt.replace(/^\s/gm,"");
    return txt;
}
function titleOBJ( bgColor, borderColor )
{
    var sFinalDiv     = '<div id="ioDivEdit" style="display:block;overflow:visible; border:1px solid '+  borderColor  +';padding-left:2px;padding-right:2px;padding-top:0px;padding-bottom:0px;font-size:12px;background-color: '+  bgColor  +'"></div>';
    var isIE          = false;
    this.oDivEdit = null;
    this.focus = function( obj )
    {
        if( typeof(obj)!="object" )
            return;
        var oBndRct = obj.getBoundingClientRect();
        this.oDivEdit.innerHTML              = getInnerText( obj );        this.oDivEdit.style.left         = oBndRct.left   + document.body.scrollLeft;
        this.oDivEdit.style.top          = oBndRct.top    + document.body.scrollTop - 1;
        this.oDivEdit.style.width            = "auto";
        if(this.oDivEdit.clientWidth + 10 > obj.clientWidth )
        {   if( this.oDivEdit.clientWidth < obj.clientWidth )
                this.oDivEdit.style.width    = isIE ? obj.clientWidth : oBndRct.right - oBndRct.left - 6 ;
            this.oDivEdit.style.height       = isIE ? oBndRct.bottom - oBndRct.top + 2 : oBndRct.bottom - oBndRct.top;
            this.oDivEdit.style.visibility   = "visible";
        }else
            this.oDivEdit.style.visibility   = "hidden";
    }
    this.hidden = function()
    {
        this.oDivEdit.style.width                        = 1;
        this.oDivEdit.style.height                       = 1;
        this.oDivEdit.style.left                         = 1;
        this.oDivEdit.style.top                          = 1;
        this.oDivEdit.innerHTML                          = "";
        this.oDivEdit.style.visibility                   = "hidden";
    }
    if( window.navigator.appName.indexOf("Microsoft") != -1 ) isIE = true;
    if( isIE )
    {   this.oDivEdit = document.createElement(sFinalDiv);
        document.body.appendChild(this.oDivEdit);
    }else
    {   document.body.innerHTML += sFinalDiv;
        this.oDivEdit = document.getElementById("ioDivEdit");
    }
    this.oDivEdit.style.position   = "absolute";
    this.oDivEdit.style.zIndex     = 100;
    this.oDivEdit.style.visibility = "hidden";
}
var otitle = new titleOBJ( "#FFFFE1", "#000000" );    document.body.onmousemove = function (event)
    {
        var event  = event || window.event;
        var curObj = document.elementFromPoint( event.clientX,event.clientY);
        var haveTR = null;
        if( curObj.parentNode &&  curObj.parentNode.parentNode && curObj.parentNode.parentNode.tagName=="TR" )
            haveTR = curObj.parentNode.parentNode;
        if( curObj.tagName == "SPAN" && curObj.className.indexOf("spanoc") != -1)
        {   otitle.focus( curObj );
            window.defaultStatus = getInnerText( curObj );
            return;
        }else if( curObj == otitle.oDivEdit )
            return;
        else if( curObj != otitle.oDivEdit && otitle.oDivEdit.style.visibility == "visible" )
        {   otitle.hidden( );
        }
    }
</script>

使用层,把要覆盖的文字作成空连接,然后就在行为中添加onmousemove()事件,弹出的菜单中选择"显示-隐藏层"就OK了

超出浏览器，IE下就非createPopup莫属了，至于firefox，那就不知道了

顶，
firefox下好象无解呀。

为了搞这个东西快把我给累死了.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
    </head>
    <body>
        <div id="con">
            <span sug="长呀呀好长呀长呀好长呀好长呀长呀好长呀长呀好长呀好长呀好长呀ABC好长呀ABC好长呀好99999990好长呀ABC">文字标题文字标题</span>
            <br/>
            <br/>
            <span sug="很长的很长的文字提示很长的很长的文字提示ABC">文字标题文字标题</span>
            <br/>
            <br/>
            <span sug="很长的很长的文字提示很长的很长的文字提示ABC">文字标题文字标题</span>
            <br/>
            <br/>
            <span sug="很长的很长的文字提示很长的很长的文字提示ABC">文字标题文字标题</span>
            <br/>
            <br/>
        </div>
        <script>
            function sug(con){
                var bcon = document.createElement('div');
                var par = document.getElementById(con);
                var elms = par.childNodes;                par.sug = bcon;
                par.appendChild(par.sug);

                for (var i = 0; i < elms.length; i++)
                    if (elms[i].nodeType == 1 && elms[i].getAttribute('sug')) {
                        elms[i].onmouseover = function(){
                            vis_sug(this);
                        }
                    }
            }

            function vis_sug(o){
                var myPopupDiv = o.parentNode.sug;
                var val = o.getAttribute('sug');
                var l, t, w, h;

                var p = window.createPopup();
                var pbody = p.document.body;

                with (pbody) {
                    //General Appearance
                    style.verticalAlign = 'middle';
                    style.backgroundColor = 'lightyellow';
                    style.border = 'solid black 1px';
                    //Font Settings
                    style.fontFamily = 'Arial';
                    style.fontWeight = 500;
                    style.fontStyle = 'normal';
                    style.fontSize = '12pt';
                    style.color = '#004080';
                    style.whiteSpace = 'nowrap';
                }

                with (myPopupDiv) {
                    style.position = 'absolute';
                    style.visibility = 'hidden';
                    style.whiteSpace = 'nowrap';
                    style.fontFamily = pbody.style.fontFamily;
                    style.fontWeight = pbody.style.fontWeight;
                    style.fontSize = pbody.style.fontSize;
                    style.fontStyle = pbody.style.fontStyle;
                    innerHTML = val;
                }

                l = o.offsetLeft;
                t = o.offsetTop;
                h = o.offsetHeight + 1;
                w = myPopupDiv.offsetWidth + 4;

                pbody.innerText = val;
                p.show(l, t, w, h, document.body);
            }

            window.onload = function(){
                sug('con')
            }
        </script>
    </body>
</html>

syukugai 辛苦了，谢谢大家！

调试易

如何在文字上显示提示文字，要求和原文字重叠。100分，up 有分，谢谢！

解决方案 »