实现思想:
在页面内放入一个Div,调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中。
后台代码:
stringanswer=e.Row.Cells[10].Text;
if(answer.Length>5)
{
e.Row.Cells[10].Text=string.Format("<labelonMouseover=\"ddrivetip('{0}','#FFFFE1',300)\"onMouseout='hideddrivetip()'>{1}...</label>",answer,answer.Substring(0,5));
前台代码:
<divid="dhtmltooltip"style="width:550px"></div>
<scripttype="text/javascript">
varoffsetxpoint=0//Customizexoffsetoftooltip
varoffsetypoint=20//Customizeyoffsetoftooltip
varie=document.all
varns6=document.getElementById&&!document.all
varenabletip=false
if(ie||ns6)
vartipobj=document.all?document.all["dhtmltooltip"]:document.getElementById?document.getElementById("dhtmltooltip"):""
functionietruebody(){
return(patMode&&patMode!="BackCompat")?document.documentElement:document.body
}
functionddrivetip(thetext,thecolor,thewidth){
if(ns6||ie){
if(typeofthewidth!="undefined")tipobj.style.width=thewidth+"px"
if(typeofthecolor!="undefined"&&thecolor!="")tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
returnfalse
}
}
functionpositiontip(e){
if(enabletip){
varcurX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;
varcurY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;
varrightedge=ie&&!window.opera?ietruebody().clientWidth-event.clientX-offsetxpoint:window.innerWidth-e.clientX-offsetxpoint-20
varbottomedge=ie&&!window.opera?ietruebody().clientHeight-event.clientY-offsetypoint:window.innerHeight-e.clientY-offsetypoint-20
varleftedge=(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"
elseif(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"
}
}
functionhideddrivetip(){
if(ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
实现效果:
鼠标移入67396...,会显示全部内容。