Cara Pasang Tooltip Di Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tooltip URL pada elemen A ? Jadi setiap kali kursor berada di atas elemen A (hover), maka akan menampilkantooltip berisi URL. Lebih jelasnya pengertian tooltip adalah sebuah text melayang ketika kursor kita diarahkan menuju URL tertentu yang kita pasang tooltip.


tooltip melayang di setiap elemen



Tooltip diperlukan ketika text yang kita baca kurang jelas atau rada blur.Pada setiap blog yang dipasang tooltip akan ada text yang melayang ketika kursornya diarahkan menuju elemen tertentu. seperti pada blog saya ini coba kursornya arahkan ke link atau menu diatas.

Tooltip Pada Elemen A Hanya URL

Pada bagian ini, kode tooltip yang saya bagikan akan menampilkan URL saja sebagai konten tooltip, seperti yang ada pada blog ini. Bagaimana cara memasangnya ? Cukup masukan kode berikut pada CSS sobat (sebelum </style> atau </b:skin>)
a:link:before,
.a:visited:before {
content:"Tautan Menuju "attr(href)"";
background:#2c3e50;
position:absolute;
z-index:2;
padding:.5em 1em;
border-radius:7.5px;
margin:2em 0 0 0;
color:#FFF;
opacity:0;
visibility:hidden;
transition:.3s ease-in-out;
}
a:link:hover:before,
a:visited:hover:before {
opacity:.95;
visibility:visible;
}


Tooltip Pada Elemen A Judul dan URL


Nah buat sobat yang rajin menambahkan title tag pada setiap tautan saya rekomendasikan menggunakan yang ini karena lebih keren karena menampilkan judul sekaligus URL yang di tuju. Sebelumnya saya akan berikan satu buah demo.
Bagaimana cara memasangnya ? Cukup masukan kode berikut pada CSS sobat (sebelum </style> atau </b:skin>)
a:link:before,
a:visited:before {
content:"Tautan "attr(title)" Menuju "attr(href)"";
background:#2c3e50;
position:absolute;
z-index:2;
padding:.5em 1em;
border-radius:7.5px;
margin:2em 0 0 0;
color:#FFF;
opacity:0;
visibility:hidden;
transition:.3s ease-in-out;
}
a:link:hover:before,
a:visited:hover:before {
opacity:.95;
visibility:visible;
}

Jangan Lupa setiap memasukan link atau tautan tambahkan title tag seperti ini :
<a href="contoh.com" title="judul tautan contoh">Contoh Tautan</a>

Namun apabila sobat lupa memasukan title tag maka akan tampil seperti Tooltip Pada Elemen A Hanya URL, jadi tenang saja. Mungkin sekian dulu artikel dari saya, semoga membantu mempercantik blog sobat

incoming search jquery tooltip, tooltip html, tooltip css, tooltip javascript, tooltip bootstrap, tooltip text, tooltip c#, tooltip image
·
Share On Whatsapp Or Line:
Previous
Next Post »

NB: Blogger Yang Bijak Selalu Meninggalkan Jejak!!!


Thank You!!! Please Jangan Lupa Follow My Blog !!!

[+] Berkomentarlah Dengan Baik Dan Sopan serta Jangan Meninggalkan Spam!!!
[+] Komentar membangun lebih disukai
[+] Kami wajib menghapus komentar yang melecehkan, kasar, dan bertendensi SARA.
[+] Untuk Memasukan Kode HTML Ke Kolom Komentar Anda Perlu Parse Dulu Kode tersebut Dengan Cara Klik Tombol conversion
[+] Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
[+] Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
[+] Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
[+] Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>
ConversionConversion EmoticonEmoticon

Thanks for your comment