显示内容长时，显示部分内容，鼠标移入显示全部内容

实现思想：

  在页面内放入一个Div, 调用lable的onMouseover，onMouseout 事件，然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中。

    后台代码：　　

 

     string  answer  =  e.Row.Cells[ 10 ].Text;
                               if  (answer.Length  >   5 )
                              {
                                                        e.Row.Cells[ 10 ].Text  =   string .Format( " <label onMouseover=\"ddrivetip('{0}','#FFFFE1', 300)\" onMouseout='hideddrivetip()'>{1}...</label> " , answer, answer.Substring( 0 ,  5 ));

 

前台代码：

 

< div id = " dhtmltooltip "   style = " width:550px  " >< / div>
< script type = " text/javascript " >
var  offsetxpoint = 0   // Customize x offset of tooltip
var  offsetypoint = 20   // Customize y offset of tooltip
var  ie = document.all
var  ns6 = document.getElementById  &&   ! document.all
var  enabletip = false
if  (ie || ns6)
var  tipobj = document.all ?  document.all[ " dhtmltooltip " ] : document.getElementById ?  document.getElementById( " dhtmltooltip " ) :  ""
function  ietruebody(){
return  (document.compatMode  &&  document.compatMode != " BackCompat " ) ?  document.documentElement : document.body
}
function  ddrivetip(thetext, thecolor, thewidth){
if  (ns6 || ie){
if  ( typeof  thewidth != " undefined " ) tipobj.style.width = thewidth + " px "
if  ( typeof  thecolor != " undefined "   &&  thecolor != "" ) tipobj.style.backgroundColor = thecolor
tipobj.innerHTML = thetext
enabletip = true
return   false
}
}
function  positiontip(e){
if  (enabletip){
var  curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
var  curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
var  rightedge = ie &&! window.opera ?  ietruebody().clientWidth - event.clientX - offsetxpoint : window.innerWidth - e.clientX - offsetxpoint - 20
var  bottomedge = ie &&! window.opera ?  ietruebody().clientHeight - event.clientY - offsetypoint : window.innerHeight - e.clientY - offsetypoint - 20
var  leftedge = (offsetxpoint < 0 ) ?  offsetxpoint * ( - 1 ) :  - 1000
if  (rightedge < tipobj.offsetWidth)
tipobj.style.left = ie ?  ietruebody().scrollLeft + event.clientX - tipobj.offsetWidth + " px "  : 

window.pageXOffset + e.clientX - tipobj.offsetWidth + " px "
else   if  (curX < leftedge)
tipobj.style.left = " 5px "
else
tipobj.style.left = curX + offsetxpoint + " px "
if  (bottomedge < tipobj.offsetHeight)
tipobj.style.top = ie ?  ietruebody().scrollTop + event.clientY - tipobj.offsetHeight - offsetypoint + " px "  : 

window.pageYOffset + e.clientY - tipobj.offsetHeight - offsetypoint + " px "
else
tipobj.style.top = curY + offsetypoint + " px "
tipobj.style.visibility = " visible "
}
}
function  hideddrivetip(){
if  (ns6 || ie){
enabletip = false
tipobj.style.visibility = " hidden "
tipobj.style.left = " -1000px "
tipobj.style.backgroundColor = ''
tipobj.style.width = ''
}
}
document.onmousemove = positiontip
< / script>

 

实现效果：

   鼠标移入67396...,会显示全部内容。