نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip
<style type="text/css">
#hintbox{ /*CSS for pop up hint box */
position:absolute;
top: 0;
background-color: #ffffee;
width: 160px; /*Default width of hint.*/
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; font-family:Tahoma
}
.hintanchor{ /*CSS for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}
</style>
<script type="text/javascript">
var horizontal_offset="9px" //horizontal offset of hint box from anchor link
/////No further editting needed
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=""
}
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>
</head>
<body>
<form>
<table width="40%" border="0" cellspacing="0" cellpadding="0" style="font-size:11px">
<tr>
<td width="22%" height="30" align="left" valign="middle">Name:</td>
<td width="78%" align="left" valign="middle"><input name="text" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
<!-- پهنای فضای نمایش توضیحات می باشد . این مقدار قابل حذف یا تغییر می باشد 150px -->
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Tel. :</td>
<td align="left" valign="middle"><input name="text2" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Education :</td>
<td align="left" valign="middle"><input name="text2" type="text" class="test" />
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a>
</td>
</tr>
<tr>
<td height="30" align="left" valign="middle">Address:</td>
<td align="left" valign="middle"><textarea name="text3" rows="4" class="test" style="margin-top:3px"></textarea>
<a href="#" class="hintanchor" onMouseOver="showhint('Description ...', this, event, '150px')">[?]</a></td>
</tr>
</table>
</form>
</body>
راهنمای استفاده
این کد دارای دو قسمت می باشد که در بخش های head و Body صفحه قرار می گیرد. با استفاده از style هایی که در قسمت head تعریف شده است می توانید ظاهر و گرافیک آن را به سلیقه خود تغییر دهید.
