Membuat Tooltip Dengan :before dan :after

Apa kabar sahabat? kali ini saya akan memberikan tutorial Cara Membuat Tooltip dengan pseudo elements :before dan :after. Untuk lebih memahami pseudo class dan pseudo elements (baca: Mengenal Pseudo Class dan Pseudo Elements) dan untuk lebih memahami cara kerja :before dan :after (baca: Menggunakan :before dan :after dalam CSS).

Tutorial kali ini, karena banyaknya request dan pertanyaan, bagaimana cara membuat tulisan Klik ganda untuk seleksi pada tag pre di blog ini.

Saat ini, saya tidak akan memberikan kode secara langsung, karena terkadang ada perbedaan hasilnya. Kadang² ada spasi/renggang antara panah dan kotak, tooltip yang tidak muncul, dsb. Oleh karena itu, saya akan memberikan tutorial step by step. Sudah tau kan apa itu tooltip?

Tooltip adalah komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen. Tooltip dapat berisi bantuan maupun informasi lain yang terkait dengan komponen tersebut. Cara ini dapat memudahkan pengguna dalam mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.

Sebelum memulai, siapkan dulu secangkir kopi dan sebungkus roko biar santai :D  kidding sob... silahkan simak aja caranya :

Sebagai contoh saya membuat kotak dengan id inikotak, nantinya bisa berupa menu, icon, pre, blockquote dsb. Kode CSS dari inikotak yang saya buat seperti ini :

#inikotak {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}

dengan kode HTML

<div id='inikotak'>INI KOTAK</div>

Maka hasilnya seperti terlihat di bawah ini:


Hal yang harus diperhatikan, sobat harus menambahkan kode position:relative untuk objek utama, agar nantinya tooltip tidak lari kemana-mana. Juga apabila ada kode overflow:hidden, hapus kode itu karena tootltip akan tersembunyi dan tidak terlihat.

Selanjutnya kita akan memulai membuat Tooltip untuk kotak di atas dengan menambahkan :before, untuk kodenya seperti ini, kode dibawah ini standar saja, yang paling penting sobat harus menambahkan position:absolute:

#inikotak::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif; 
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
}

maka hasilnya akan berubah seperti ini:


Selanjutnya, kita akan menambahkan panah kecil pada tooltip, kodenya seperti ini

#inikotak::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
}

maka hasilnya akan berubah seperti ini:


Apabila ada jarak / renggang antara tooltip dan panah, atur kode top:-7 dikurangi atau ditambah. Nantinya, sobat bisa menerapkan kode :before dan :after diberbagai tempat, misalnya pada tag pre maka codenya menjadi pre:before atau pre::before.

Setelah tooltip terlihat sempurna, kita mulai langkah menghilangkan tooltip sebelum disentuh mouse, tambahkan kode dibawah ini pada #inikotak::before dan #inikotak::after

opacity:0;
visibility:hidden;

kemudian kita munculkan tooltip di atas, pada saat objek di sentuh mouse dengan kode seperti ini :

#inikotak:hover::before, #inikotak:hover::after {
opacity:.5;
visibility:visible;
}

Maka hasilnya seperti dibawah (untuk melihat hasinya, arahkan mouse ke objek)



Jadi kode keseluhannya seperti ini :

#inikotak {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}
#inikotak::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
#inikotak::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
#inikotak:hover::before, #inikotak:hover::after {
opacity:.5;
visibility:visible;
}