Tooltip? banyak udah yang bahas tooltip tapi sekarang Ada yang baru nih, Tooltip yang dulu terbang-terbang kesana kemari menggunakan Jquery ( javascript ) sekarang bisa dibuat dengan css3 dengan memanfaatkan css3 trasition
kita bisa membuat animasi dimana Tooltipnya terbang dari atas. seperti apa sih tuh Tolltipnya, coba aja langsung Sorot Link Dibawah ini.
Dengan mengandalkan
Pseudo element
tooltip css3 ini bisa tercipta dengan baik. css biasa disimpan diatas ]]></b:skin>
/* Creation Of : ZTO URL : http://zhinto.blogspot.com/ */ a.zto { position: relative; text-decoration: none; } a.zto::before { position: absolute; content: attr(data-title); background: #4C8FCC; width: 200px; padding: 5px 10px; color: #000; top: -1000px; text-align: justify; z-index: 99; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; transition: all 0.5s linear; border: 5px solid #335BA2; visibility: hidden; font: normal 12px/20px Arial,sans-serif } a.zto:hover::before { top: 100%; visibility: visible; }
Dan dibawah ini kerangka HTML_nya.
<a href="/" class="zto" data-title="Saya adalah Tooltip yang menuju ke HOMEPAGE blog ini">ZTO CSS3 Tooltip</a>
Pada Attribut
data-title
silahkan ganti keterangannya dengan keterangan dari link anda.