Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip


نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip


<head>
<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 تعریف شده است می توانید  ظاهر و گرافیک آن را به سلیقه خود تغییر دهید.

 


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36576
افراد آنلاین : 3
بازدید امروز : 359
بازدید دیروز : 870
گوگل امروز : 13
گوگل دیروز : 126
بازدید هفته : 2,861
بازدید ماه : 14,690
بازدید سال : 297,614
بازدید کلی : 10,692,090