การทำ Popup help text โดยใช้ Javascript

หลักในการทำ Popup help text 1.สร้าง object div ใน html document โดยกำหนดให้ visibility เป็น hidden 2.กำหนดให้ object div ยกเลิกการซ่อนและแสดงผลความตำแหน่งที่ต้องการเมื่อเกิด event onmouseover บน control ที่ต้องการ Code : popuptext.htm

<html>
<head>
<title>การแสดงกล่องข้อความแนะนำ</title>
<style type="text/css">
#hintBox{
position:absolute;
top:0;
background-color:white;
width:150px;
padding:3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right:3px solid black;
border-bottom:3px solid black;
visibility: hidden;
}
.hint {
font-weith:bold;
color:navy;
margin:3px 8px;
}
</style>
<script language="javascript">
var horizontalOffset = "9px"
var verticalOffset = "0"
var ie = document.all
var ns6 = document.getElementById && !document.all
function getposOffset(elm, offsettype) {
var totalOffset = (offsettype == "left") ? elm.offsetLeft:elm.offsetTop;
var parentElement = elm.offsetParent;
while (parentElement != null) {
totalOffset = (offsettype == "left") ? totalOffset + parentElement.offsetLeft:totalOffset + parentElement.offsetTop;
parentElement = parentElement.offsetParent;
}
return totalOffset;
}
function ieTest() {
return(document.compatMode && document.compatMode != "BackCompat") ? document.documentElement:document.body;
}

function clearEdge(obj, whichedge) {
var edgeoffset = (whichedge == "rightedge") ? parseInt(horizontalOffset)*-1 : parseInt(verticalOffset)*-1
if (whichedge == "rightedge") {
var windowEdge = ie && !window.opera ? ieTest().scrollLeft + ieTest().clientWidth - 30 : window.pageXOffset + window.innerWidth - 30;
dropMenu.contentMeasure = dropMenu.offsetWidth;
if(windowEdge - dropMenu.x < dropMenu.contentMeasure)
edgeoffset = dropMenu.contentMeasure + obj.offsetWidth + parseInt(horizontalOffset);
}
else {
var windowEdge = ie && !window.opera ? ieTest().scrollTop + ieTest().clientHeight - 30 : window.pageYOffset + window.innerHeight - 30;
dropMenu.contentMeasure = dropMenu.offsetHeight;
if(windowEdge - dropMenu.y < dropMenu.contentMeasure)
edgeoffset = dropMenu.contentMeasure - obj.offsetHeight;
}
return edgeoffset;
}

function showhint(menuContent, obj, e, tipwidth){
if((ie||ns6) && document.getElementById("hintBox")) {
dropMenu = document.getElementById("hintBox");
dropMenu.innerHTML = menuContent;
dropMenu.x = getposOffset(obj, "left");
dropMenu.y = getposOffset(obj, "top");
dropMenu.style.left = dropMenu.x - clearEdge(obj, "rightedge") + obj.offsetWidth + "px";
dropMenu.style.top = dropMenu.y - clearEdge(obj, "bottomedge") + "px";
dropMenu.style.visibility = "visible";
obj.onmouseout = hideHint;
}
}

function hideHint(e) {
dropMenu.style.visibility = "hidden";
}

function createHint() {
var block = document.createElement("div");
document.body.appendChild(block);
block.setAttribute("id","hintBox");
}

if(window.addEventListener)
window.addEventListener("load", createHint, false);
else if(window.attachEvent)
window.attachEvent("onload", createHint);
else if(document.getElementById)
window.onload = createHint;
</script>
</head>
<body>
<form>
<b>ชื่อในการใช้งาน</b>
<input type="text" class="test" style="width: 152px" /><a href="#" class="hint" onmouseover=" showhint('พิมพ์ชื่อผู้ใช้ โดยให้เป็นอักขระจากแป้นพิมพ์เท่านี้น', this, event, '150px')"><font color="#6666FF">[?]</font></a><br />

<b>รหัสผ่าน</b><input type="text" class="test" /><a href="#" class="hint" onmouseover=" showhint('ใส่รหัสผ่าน โดยมีอย่างน้อย 8 ตัวอักษร', this, event, '200px')"><font color="#6666FF">[?]</font></a><br />

<br/>
<b>e-mail address</b><input type="text" class="test" style="width: 152px" ID="Text1" NAME="Text1" onmouseover=" showhint('กรุณาใส่ e-mail address', this, event, '200px')"/>
</form>
</body>
</html>