tooltip.js

tooltip,气泡提示信息.非常常用和实用的一个小控件.

if(_Tooltip_Path==null)
{
	var _Tooltip_Path="";
}
var tooltipsrcelement=null;
function tooltipon(time)
{
	tooltipsrcelement=event.srcElement;
	if(time==null)
		tooltipshow();
	else
		setTimeout("tooltipshow()",time)
}
function tooltipshow()
{
	var content=tooltipsrcelement.getAttribute("tooltip");
	var Direction=tooltipsrcelement.getAttribute("Direction");
	var SrcElementTop=tooltipsrcelement.getBoundingClientRect().top;
	var SrcElementLeft=tooltipsrcelement.getBoundingClientRect().left;
	var SrcElementHeight=tooltipsrcelement.offsetHeight;

	if(content!=null)
		document.getElementById("_TooltipWindow_Content").innerHTML=content;

	document.getElementById("_TooltipWindow").style.display="";
	switch(Direction)
	{
		case "top":
			document.getElementById("_TooltipWindow_top1").style.display="";
			document.getElementById("_TooltipWindow_top2").style.display="none";
			document.getElementById("_TooltipWindow_bottom1").style.display="";
			document.getElementById("_TooltipWindow_bottom2").style.display="none";
			document.getElementById("_TooltipWindow").style.top=SrcElementTop + SrcElementHeight - 2;
			document.getElementById("_TooltipWindow").style.left=SrcElementLeft;
		break;
		case "bottom":
			document.getElementById("_TooltipWindow_top1").style.display="none";
			document.getElementById("_TooltipWindow_top2").style.display="";
			document.getElementById("_TooltipWindow_bottom1").style.display="none";
			document.getElementById("_TooltipWindow_bottom2").style.display="";
			document.getElementById("_TooltipWindow").style.top=SrcElementTop - document.getElementById("_TooltipWindow").offsetHeight + 1;
			document.getElementById("_TooltipWindow").style.left=SrcElementLeft;
		break;
	}
}
function tooltipoff()
{
	//document.getElementById("_TooltipWindow_Content").innerHTML="";
	document.getElementById("_TooltipWindow").style.display="none";
}

document.write ("<table cellspacing='0' cellpadding='0' style='filter:progid:DXImageTransform.Microsoft.Shadow(Strength=3,Direction=145);' id='_TooltipWindow' style='display:none;position:absolute;' onmouseover='tooltipon()' onmouseout='tooltipoff()'>");
document.write ("<tr id='_TooltipWindow_top1'>");
document.write ("	<td valign='bottom'><img src='" + _Tooltip_Path + "t11.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td style='background:url(" + _Tooltip_Path + "t12.gif) repeat-x bottom;padding-left:10px;'><img src='" + _Tooltip_Path + "aup.gif' width='13' height='19' border='0' alt=''></td>");
document.write ("	<td valign='bottom'><img src='" + _Tooltip_Path + "t13.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("</tr>");
document.write ("<tr id='_TooltipWindow_top2'>");
document.write ("	<td valign='bottom'><img src='" + _Tooltip_Path + "t11.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td background='" + _Tooltip_Path + "t12.gif';><img src='" + _Tooltip_Path + "t12.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td valign='bottom'><img src='" + _Tooltip_Path + "t13.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("</tr>");
document.write ("<tr>");
document.write ("	<td background='" + _Tooltip_Path + "t21.gif'></td>");
document.write ("	<td background='" + _Tooltip_Path + "t22.gif' style='line-height:18px;padding:5px;font-size:12px;'><span id='_TooltipWindow_Content'></span></td>");
document.write ("	<td background='" + _Tooltip_Path + "t23.gif'></td>");
document.write ("</tr>");
document.write ("<tr id='_TooltipWindow_bottom1'>");
document.write ("	<td><img src='" + _Tooltip_Path + "t31.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td background='" + _Tooltip_Path + "t32.gif'><img src='" + _Tooltip_Path + "t32.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td><img src='" + _Tooltip_Path + "t33.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("</tr>");
document.write ("<tr id='_TooltipWindow_bottom2'>");
document.write ("	<td valign='top'><img src='" + _Tooltip_Path + "t31.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("	<td style='background:url(" + _Tooltip_Path + "t32.gif) repeat-x top;padding-left:10px;'><img src='" + _Tooltip_Path + "adown.gif' width='13' height='19' border='0' alt=''></td>");
document.write ("	<td valign='top'><img src='" + _Tooltip_Path + "t33.gif' width='6' height='6' border='0' alt=''></td>");
document.write ("</tr>");
document.write ("</table>");