کد تول تایپ زیبا (title)

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

کد را در هر جای قالب بگذارید عمل می کند.

مرورگرسازگار با تمام قسمت های کد: فایرفاکس (البته سه مرورگر معروف اینترنت اکسپلورر ، فایرفاکس و گوگل کروم اصل این کد را نشان می دهند اما اینترنت اکسپلورر به علت ناسازگار بودن با CSS3 به تزئینات عمل نمی کند.)

<script> var qTipTag = "a,label,input,img,textarea"; var qTipX = 0; var qTipY = 15; tooltip = { name : "qTip", offsetX : qTipX, offsetY : qTipY, tip : null } tooltip.init = function () { var tipNameSpaceURI = "http://www.w3.org/1999/xhtml"; if(!tipContainerID){ var tipContainerID = "qTip";} var tipContainer = document.getElementById(tipContainerID); if(!tipContainer) { tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div"); tipContainer.setAttribute("id", tipContainerID); document.getElementsByTagName("body").item(0).appendChild(tipContainer); } if (!document.getElementById) return; this.tip = document.getElementById (this.name); if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)}; var a, sTitle, elements; var elementList = qTipTag.split(","); for(var j = 0; j < elementList.length; j++) { elements = document.getElementsByTagName(elementList[j]); if(elements) { for (var i = 0; i < elements.length; i ++) { a = elements[i]; sTitle = a.getAttribute("title"); if(sTitle) { a.setAttribute("tiptitle", sTitle); a.removeAttribute("title"); a.removeAttribute("alt"); a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))}; a.onmouseout = function() {tooltip.hide()}; } } } } } tooltip.move = function (evt) { var x=0, y=0; if (document.all) {//IE x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; x += window.event.clientX; y += window.event.clientY; } else {//Good Browsers x = evt.pageX; y = evt.pageY; } this.tip.style.left = (x + this.offsetX) + "px"; this.tip.style.top = (y + this.offsetY) + "px"; } tooltip.show = function (text) { if (!this.tip) return; this.tip.innerHTML = text; this.tip.style.display = "block"; } tooltip.hide = function () { if (!this.tip) return; this.tip.innerHTML = ""; this.tip.style.display = "none"; } window.onload = function () { tooltip.init (); } </script> <!-- Start auto tooltip --> <style type="text/css"> div#qTip { border:1px solid #A0A0A0; z-index: 3000; background:#4f4f4f; min-width:40px; min-height:14px; text-direction:rtl; text-align:center; padding:5px 5px; filter:alpha(opacity=80); opacity:0.9; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; color:#fff; shadow:5px 5px 0 #FFF; font-size:9pt; font-family: tahoma; text-shadow:0px 0px 6px #000; display:none; -moz-box-shadow: 0px 0px 2px #fff; position:absolute; margin-top:10px; margin-bottom:10px; margin-left:10px; max-width: 200px; background-color: #C7C7C7!important; color: 000; } </style>