Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title

Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title - Assalamu'alaikum warahmatullahi wabarakatuh, Hallo sahabat Gurusdku.Id Salam PPK, Pada Artikel yang anda baca kali ini dengan judul Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title, mudah-mudahan isi postingan Artikel Blog Tutorial, bisa bermanfaat bagi proses pembelajaran di sekolah bapak dan ibu gurusdku.

Judul : Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title
link : Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title

Template Blog ini sudah berubah. Mungkin terdapat sebagian demo yang tidak berfungsi pada blog ini, tapi akan berfungsi pada blog anda

Info [K-moe] - Apa itu Tooltip? Tooltip merupakan elemen yang menampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website. Tooltip dapat berisi bantuan maupun informasi lain yang terkait dengan komponen tersebut.

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".

DEMO

Link 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.

1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template terlebih dahulu dengan Download lengkap
4. 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;}

5. Setelah itu sisipkan kode di bawah ini di atas tag </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>

6. Kemudian simpan

Demikianlah Artikel Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title

Sekianlah artikel Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Tooltip Otomatis Pada Tag "a" Beratribut Title dengan alamat link https://silabusgtk.blogspot.com/2017/04/membuat-tooltip-otomatis-pada-tag.html

Share this post