炼狱：window.createPopup()弹出提示tips

炼狱：window.createPopup()弹出提示tips

CCBS 系统增加了新的需求，给界面上的Text文本输入框和Select下拉框增加信息提示。
对于Text输入框来说，实现起来并不难：重载Text文本框的onmouseover事件，然后显示出Text文本框的title也就可以了。
但是，对于Select控件来说就远远没有这么简单了。首先Select本身没有Title属性！无疑增加了实现的难度。
在网上找了点资料后，发现window.createPopup()函数可以实现弹出式的tips，而且微软的技术支持网站也有这方面的例子（参见：http://msdn.microsoft.com/workshop/samples/author/dhtml/popup/usingpopup.htm）。但是实现起来并不是那么一帆风顺的事情。
首先，window.createPopup()生成的窗口在显示的时候要手动指定该窗口的位置（x，y坐标），窗口的宽度和高度。而显示的内容是变化的，显示的字符串有长有短，窗口的长度和宽度也要跟着变化，如何实现呢？
其次，windows网页上的title属性在显示提示信息的时候是永远不会换行的，哪怕你显示的信息超过屏幕的显示范围它也不会顾忌到你的感受。windows标准就是我们的标准，我们也只能仿效了。
上面的两个问题着实让我困惑了一阵子，应该说是一个下午吧。不过最后问题还是得到解决了，虽然过程颇有些周折。
首先解决的是弹出窗口的指定位置，宽度和高度问题。窗口的位置就是响应鼠标事件的位置，但是该位置一定要区分清楚，鼠标如下几个位置的参数：clientX,clientY;offsetX,offsetY,screenX,screenY,x,y等。（具体每个位置的意义有单独的文章来解释）在这里应该是相对于响应控件的位置，使用的是offsetX,offsetY值。
要控制createPopuo()生成的窗口的宽度和高度，必须使用一个比较“土”的方法：首先调用oPopup.show(0,0,width,height)方法，马上获得该窗体的scrollWidth,scrollHeight，然后对该窗体隐藏：oPopup.hide()。获得具体的宽度和高度之后，再在具体的位置上显示真正的提示信息：
oPopup.show(x,y,scrollWidth,scrollHeight)。也就是说：在真正显示tips之前要调用一次显示方法获得实际的宽度和高度！这是解决问题的重点！！！
让显示的信息不换行的问题解决过程说难也不难，重要的是要能够想到该方法：使用table中的td不允许换行的属性：nowrap，那么包含在td中的内容就会一直显示出来，永远都不会换行了！！！
代码的范例如下：
 
var winPopup = window.createPopup(); //Create the window to popup
var winstr="<table style=/" border: 1 solid  #FFA6CA/" border=/"0/" width=/"100%/" height=/"100%/" cellpadding=/"0/" cellspacing=/"0/"  background=/"/" >";
 winstr+="<tr><td align=/"center/"><table width=/"100%/" height=/"100%/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
 winstr+="<tr><td nowrap id=/"tdMsg/" valign=/"center/" style=/"font-size:12px; color: red; face: Tahoma/"></td></tr></table></td></tr></table>";
winPopup.document.body.innerHTML = winstr;
var eventElement = null;
var xPos = 0;
var yPos = 0;
var timer = null;
/*************************************************************************
 Function Name:showPopupHelp
 Description:Popup a window that shows the content of text or select
 Input Parameter:None
 Output :None
 Return:None
 ***********************************************************************/
function showPopupHelp(helpMsg)
{
 initPopupWindow(helpMsg);
 eventElement = event.srcElement;
 xPos= window.event.offsetX;
 yPos= window.event.offsetY;
 timer = setTimeout("showPopupWindow()",1000);
}
/*************************************************************************
 Function Name:hidePopupHelp
 Description:Invisible the popup window
 Input Parameter:None
 Output :None
 Return:None
 ***********************************************************************/
function hidePopupHelp()
{
 clearTimeout(timer);
 winPopup.hide();
}
/*************************************************************************
 Function Name:initPopupWindow
 Description:Initilize the popup window,draw the frame
 Input Parameter:String to show
 Output :None
 Return:None
 ***********************************************************************/
function initPopupWindow(msgstr)
{
 winPopup.document.all('tdMsg').innerText = msgstr;
}
/*************************************************************************
 Function Name:showPopupWindow
 Description:Visible the popup window
 Input Parameter:None
 Output :None
 Return:None
 ***********************************************************************/
function showPopupWindow()
{
 winPopup.show(0,0,10,10);
 var h = winPopup.document.body.scrollHeight;
 var w = winPopup.document.body.scrollWidth;
 winPopup.hide();
 //var w = eventElement.offsetWidth;
 //var h = winPopup.document.body.scrollHeight;
 //var x = eventElement.style.left;
 //var y = eventElement.style.top + eventElement.offsetHeight;
 var x = xPos + 3;
 var y = yPos + 3;
 winPopup.show(x,y,w,h,eventElement);
 delete eventElement;
}