A hint box pops up relevant hints or useful
information. when the mouse moves over it. Suppose we take a Textbox to enter
password. Then hint Box pops up a message password must be 8 character or
longer.
For Example
Drag and drop three Textbox for username,
password and email on the form.
Figure1
Using below code for the head section.
<style type="text/css">
#hintbox{
position:absolute;
top:
0;
background-color:yellow;
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;
}
.hintanchor{
font-weight:
bold;
color:
red;
margin:
3px 8px;
}
</style>
<script type="text/javascript">
var horizontal_offset =
"9px"
//horizontal offset of hint box from anchor link
var vertical_offset =
"0" //horizontal offset of hint box from
anchor link. No need to change.
var ie = document.all
var ns6 = document.getElementById &&
!document.all
function getposOffset(what, offsettype) {
var totaloffset = (offsettype ==
"left") ? what.offsetLeft : what.offsetTop;
var parentEl = what.offsetParent;
while (parentEl != null)
{
totaloffset =
(offsettype == "left") ? totaloffset +
parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
parentEl =
parentEl.offsetParent;
}
return totaloffset;
}
function iecompattest() {
return (document.compatMode &&
document.compatMode != "BackCompat") ?
document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge) {
var edgeoffset = (whichedge ==
"rightedge") ? parseInt(horizontal_offset) *
-1 : parseInt(vertical_offset) * -1
if (whichedge == "rightedge")
{
var windowedge = ie && !window.opera ?
iecompattest().scrollLeft + iecompattest().clientWidth - 30 : window.pageXOffset
+ window.innerWidth - 40
dropmenuobj.contentmeasure = dropmenuobj.offsetWidth
if (windowedge - dropmenuobj.x <
dropmenuobj.contentmeasure)
edgeoffset
= dropmenuobj.contentmeasure + obj.offsetWidth + parseInt(horizontal_offset)
}
else {
var windowedge = ie && !window.opera ?
iecompattest().scrollTop + iecompattest().clientHeight - 15 : window.pageYOffset
+ window.innerHeight - 18
dropmenuobj.contentmeasure = dropmenuobj.offsetHeight
if (windowedge - dropmenuobj.y <
dropmenuobj.contentmeasure)
edgeoffset
= dropmenuobj.contentmeasure - obj.offsetHeight
}
return
edgeoffset
}
function showhint(menucontents, obj, e,
tipwidth) {
if ((ie || ns6) && document.getElementById("hintbox"))
{
dropmenuobj =
document.getElementById("hintbox")
dropmenuobj.innerHTML = menucontents
dropmenuobj.style.left = dropmenuobj.style.top = -500
if (tipwidth != "")
{
dropmenuobj.widthobj = dropmenuobj.style
dropmenuobj.widthobj.width = tipwidth
}
dropmenuobj.x =
getposOffset(obj, "left")
dropmenuobj.y =
getposOffset(obj, "top")
dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj,
"rightedge") + obj.offsetWidth +
"px"
dropmenuobj.style.top = dropmenuobj.y - clearbrowseredge(obj,
"bottomedge") + "px"
dropmenuobj.style.visibility = "visible"
obj.onmouseout
= hidetip
}
}
function hidetip(e) {
dropmenuobj.style.visibility = "hidden"
dropmenuobj.style.left = "-500px"
}
function createhintbox() {
var divblock = document.createElement("div")
divblock.setAttribute("id",
"hintbox")
document.body.appendChild(divblock)
}
if (window.addEventListener)
window.addEventListener("load", createhintbox,
false)
else if
(window.attachEvent)
window.attachEvent("onload",
createhintbox)
else if
(document.getElementById)
window.onload =
createhintbox
</script>
The below code for the Body section.
b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please
choose a username. Should consist of alphanumeric characters only.', this,
event, '150px')">[?]</a><br />
<br />
<b>Password:</b>
<input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please
enter password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
<br />
<b>
Email:</b>
<input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please
enter email. <b>Must</b> must be contain @ and . sign. ', this, event,
'200px')">[?]</a><br />
The form looks like this.
Figure2
Now run the application and test it.
Figure3
Now mouse moves over email hint box for useful
information.
Figure4