Tool Tip 示例（javascript版）

<script language="javascript">
function Show(divid) { 
divid.filters.revealTrans.apply(); 
divid.style.visibility = "visible"; 
divid.filters.revealTrans.play(); 
} 
function Hide(divid) { 
divid.filters.revealTrans.apply(); 
divid.style.visibility = "hidden"; 
divid.filters.revealTrans.play(); 
} 
</script>
<style> 
.article {}{ 
BORDER-RIGHT: #999999 1px solid;
 PADDING-RIGHT: 3px; 
 BORDER-TOP: #999999 1px solid;
  PADDING-LEFT: 3px; 
  FILTER: revealTrans(transition=50,duration=1) blendTrans(duration=1); 
  VISIBILITY: hidden; 
  PADDING-BOTTOM: 3px; BORDER-LEFT: #999999 1px solid; 
  WIDTH: 150px;
   LINE-HEIGHT: 18px; 
   PADDING-TOP: 3px;
   BORDER-BOTTOM: #999999 1px solid;
    POSITION: absolute; 
    BACKGROUND-COLOR: red; }
</style>
 
<DIV id="DIV1" >
 <TABLE height="100" cellSpacing="0" cellPadding="0" width="100" border="0" ms_1d_layout="TRUE">
  <TR>
   <TD onmouseover="Show(title1)" style="CURSOR: hand" onmouseout="Hide(title1)">
    <DIV class="article" id="title3" align="left"></DIV>
    <FONT face="宋体"></FONT>show tool tip   </TD>
  </TR>
 </TABLE>
</DIV>
<FONT face="宋体">
 <BR>
 <BR>
</FONT>

<DIV class="article" id="title1" align="left" style="Z-INDEX: 103;top:20%;left:20%;">
 <TABLE cellSpacing="0" cellPadding="0" width="368" border="0" ID="Table1" height="104">
  <TBODY>
   <TR>
    <TD>hello word</TD>
   </TR>
  </TBODY></TABLE>
</DIV>

<SCRIPT language=JavaScript1.2>
<!--
tPopWait=50;
tPopShow=50000;
showPopStep=10;
popOpacity=100;

sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: #FFFFFF; border: 1px #000000 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");

function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting); 
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0; 
}
else {
if(o.dyclass!=null) popStyle=o.dyclass 
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}

}
}

function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}

function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}

function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
//-->
</script>
<img src="http://www.blueidea.com/img/common/logo.gif" alt="blue！dea welcome you">