Tooltip CSS Without Span Writed Syntax

Trik simpel seputaran link saat ini cuma lebih menjelaskan kembali! Seperti Koben bilang dengan hadirnya CSS3, maka penulisan, kode, rumusan, syntax, etc juga mengalami penambahan yang lumayan bikin pusing :D Bila kita memperhatikan dengan seksama, seorang developer dalam menuliskan syntax/code terdapat tulisan yg awam kita ketahui. Contohnya seperti ini @media print, content: " ";, :nth-child(even), :nth-child(odd), @keyframes dll.
Ternyata tidak semudah membuat gorengan combro memahami atribut baru query CSS3. Lebih jauh kita dapat memadukan antara special character yg sudah di konversi agar terbaca pada format HTML/XHTML. Koben sendiri antara tahu, tapi pusing mempelajari ilmunya :D Satu yg pasti, selagi ada live demo gue ngerti apa yg dimaksudkan oleh developer man :))

Contoh sederhana begini sob, penerapan attribute :before Lihat:

Apa kalian pikir alamat email orang keren itu saya tulis dengan menuliskan manual! Oh tidak begitu prosesnya :-/ Itu ditulis memakai CSS dengan pemanggilan syntax HTML.

KODE CSS

<style>
.email-address:before {
content: "beben.koben@gmail.com"
}
</style>

KODE HTML

<p class="email-address"></p>

Dengan cukup menuliskan syntax <p class="email-address"></p>, pada web akan ditampilkan tulisan ganteng.kalem@gmail.com
Sekarang coba ganti isi content: (email address) dengan membubuhkan spesial karakter yg jumlahnya ada...:D Hal wajib dalam mengikuti aturan main trik postingan kali ini, browsingan teman² harus sudah support :)
Koben terfokus pada cara membuat tooltip dengan memakai CSS. Kebanyakan keterangan tutorial tooltip CSS dalam pemakaiannya menyertakan variabel <span>konten tooltip add here</span> Lihat artikel berikut Sexy Tooltips with Just CSS!

Setelah baca² tema lain dan Koben menemukan alternatif lain dalam penerapan CSS-tooltip tanpa harus menyertakan span span dalam pemakaiannya!! Jadi tidak ribet toh ;)
Yuk kita mulai caranya bagaimana, dan apa saja bumbu yg harus di masukan. Pertama-tama tekan Ctrl + F kibor anda, dilanjutkan dengan menemukan code a:hover Kalau sudah ada, tambahkan variable position: relative;a:hover {

YOUR STYLE CODED BLA BLA BLA

position: relative;
}Tepat dibawah kode a:hover, tambahkan bumbu rahasia brkt

a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
background: #eee; 
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
}

SAVE.
Setiap syntax link yg kalian tulis disertai pemakaian title, akan full stylish terlihat b-) Kreasikan bumbu rahasia dengan menambahkan variabel lain sesuai selera masing² Ganti top: 100%; dengan bottom: 100%; bila posisi judul tidak sesuai kesukaan.

Makanya pernah melihat CSS eksternal full murni sampai gambar memakai CSS? Tidak lain itu dengan metode ini sob. Ya walau huruf font harus khusus juga sih ;)) Bagi sobat yg memang tidak mau menyertakan position: relative; pada a:hover, bila tetap mau menampilkan tooltip akan terlihat kurang sreg posisi si tool-tipnya :-s
Oleh karena itu, maka bumbu rahasia yg patut dicoba menjadi begini

a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
background: #eee; 
left: 0;
top: 0;
white-space: nowrap;
z-index: 2;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 0 0 5px 0;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
}

Koben patenkan pada posisi pojok kiri atas :P (kalau mau sih itu juga) :)) Kreasi sendiri lah sok :P
Demikian tips dari AA Ganteng Kalem membuat tooltips CSS tanpa embel² span :D
Thanks: http://css-tricks.com/css-content/ :)
Other:
http://designshack.net/articles/javascript/25-useful-resources-for-creating-tooltips-with-javascript-or-css/
Happy CSS \m/