آموزش حرفه ای کردن تاتیل های سایت

اول جا داره از آقای قاسمی نیا تشکر کنم برای این آموزش و این تایتل حرفه ای بسیار زیبا و خوبشون

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

کد مربوطه را درون <head> فایل header.php قالب قرار دهید . 

<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: #dcedf9!important;
    color: 000;
}
</style>

برای فراخوانی هم میتونید از کد زیر استفاده کنید

title="عشق منحصر بفرد"

امیدوارم مورد پسندتون باشه مشکلی بود بنده در خدمتم