0 Tooltip terbang dengan css3

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.

ZTO CSS3 Tooltip

Dengan mengandalkan Pseudo element tooltip css3 ini bisa tercipta dengan baik. css biasa disimpan diatas ]]></b:skin>

/* Creation Of : ZTO URL : http://tutorealsamak.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.