Pertanyaan selanjutnya bagaimana cara memodifikasi tooltip tersebut? Sangat banyak sekali cara untuk mengganti elemen tooltip bawaan dengan hasil modifikasi kita, salah satunya yang akan saya posting adalah cara membuat tooltip pada semua tag <a> yang memiliki atribut Title="contoh klik demo".
DEMOLink dengan atribut title, lorem ipsum param pan lorem lorem ipsum param pan lorem lorem ipsum param pan lorem lorem ipsum param pan lorem lorem ipsum param pan lorem. Link tanpa atribut title maka tooltip tidak muncul
Langkah-langkah membuat tooltip.
- Login ke Blog
- Rancangan - Edit HTML
- Untuk menghindari keselahan, Backup template terlebih dahulu dengan Download lengkap
- Cari kode ]]></b:skin> untuk lebih mudahnya tekan Ctrl F kemudian pastekan kode tersebut. Setelah ketemu copy kode di bawah ini tepat sebelum ]]></b:skin>
#tooltips {
display:none;
position:absolute;
color:#fff;
text-shadow:0 0 2px #000;
padding:4px 8px;
border:1px solid rgba(255,255,255,0.25);
background:#000;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
box-shadow:0 0 3px #555;
font:inherit;
font-size:97%;
width:auto;
max-width:200px;
opacity:.88;}
</body>.
<script type='text/javascript'>
//<![CDATA[
(function(){var b=document.getElementsByTagName("a");var e=document.createElement("span");e.id="tooltips";document.body.appendChild(e);var f=document.getElementById("tooltips");function g(a){f.style.display="block";f.innerHTML=this.title;f.style.top=(a.pageY+25)+"px";f.style.left=a.pageX+"px";this.setAttribute("original",this.title);this.title=""}function c()f.innerHTML="";f.style.display="none";this.title=this.getAttribute("original");this.removeAttribute("original")}for(var d=0;d<b.length;d++){if(b[d].title){b[d].onmouseover=g;b[d].onmouseout=c}}})();
//]]>
</script>