Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy
Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya hasilnya jadi lebih menarik.. Yuk disimak.. :D
Halo sobat Jagocoding,, kali ini ijinkan saya share tentang tutorial mendesain tooltip hanya dengan bantuan CSS. Kalo biasanya tooltip itu hanya menggunakan atribut title di tag HTML, sekarang kita belajar gunakan CSS supaya terlihat lebih menarik lagi. Di tutorial ini sih saya nggak pakai resource gambar apapun,, akan tetapi tentunya bisa dikembangkan dengan gambar-gambar background tentunya. Soalnya dari saya sendiri sih CSS Pure itu kayaknya lebih asik ketimbang kebanyakan gambar.. :D Yuk, langsung cus aja ya~
Pertama-tama kita siapkan dulu struktur link seperti ini di HTML :
Ini adalah link <span class="tooltip">Ini adalah keterangan / tooltip yang muncul ketika mouse diarahkan ke link. Seperti yang kita lihat, didalam tag Anchor tersebut kita membutuhkan 1 tag span untuk membantu pembuatan tooltip tersebut. Sampai disini hasil awalnya tentu saja masih sangat flat, kira-kira seperti ini :
HTMLnya cukup sekian aja,, selanjutnya kita bermain banyak di CSS,, Pertama-tama kita mengatur tipe display tag Anchor tersebut. Secara default, Anchor itu nilai displaynya adalah inline. Kalau ini tidak kita ubah , nanti tooltipnya bakalan tampil di samping tulisan.. Untuk kasus ini sih yang paling cocok dipake display:inline-block. body{font-family:Calibri, Candara, sans-serif;} /*cuma iseng.. BOsen sih liat font Times New Roman terus.. :p*/ a.link{display:inline-block;} /*<---ini nih..*/
Hasil akhirnya pun masih terlihat sama seperti gambar yang sebelumnya. sekarang kita baru akan mendesain tooltipnya. Di bagian desain tooltip ini kita bebas mengatur warna background, warna tulisan, padding, lebar, dan semacamnya.. Tapi yang paling penting, adalah perintah position:absolute; setelahnya, supaya posisi tooltip nantinya ada dibawah link. Kira-kira seperti ini: .tooltip{ /*Terserah desainnya bagaimana~*/ background:#303030; padding:10px; color:#f0f0f0; border-radius:10px; -moz-border-radius:10px; width:200px; text-align:center; /*yang ini penting!*/ position:absolute; } Sampai disini, hasilnya sudah mulai terlihat seperti tooltip.. kira-kira seperti ini nih..
Sampai disini pun sebenarnya sudah cukup untuk dibilang tooltip.. Tapi dari saya sendiri sih rasanya masih ada yang kurang,, Kalau nggak ada bentuk segitiga panah ke arah link itu kayaknya ada yang kurang.. Kalo gitu kita buat juga deh CSSnya.. Untuk hal satu ini, emang paling cepet kalo pake gambar segitiga panahnya langsung, tapi kita bisa buat bentuk segitiga hanya dengan modal CSS border lho.. Caranya seperti ini, pertama kita buat selector tooltip lagi dengan bantuan pseudo code before. Tujuannya adalah mengisi sebuah elemen yang letaknya sebelum layer .tooltip itu sendiri. Karena elemen segitiga itu nggak perlu kita isi tulisan apa-apa, jadi contentnya diisi petik2 aja.. Jangan lupa dikasi position absolute supaya posisinya mudah kita atur sesuka kita. .tooltip:before{ /*wajib!*/ content:"";
position:absolute; /*ini nih cara buat segitiga tanpa gambar dgn CSS*/ border:10px solid transparent; border-bottom:10px solid #303030; /*supaya lokasi segitiganya rapi*/ top:-20px; left:10px; } Nah, seperti yang kita lihat di code diatas, cara buat segitiganya adalah dengan membuat border transparan, setelah itu diberi border bottom sesuai ukuran yang kita inginkan. Dan perintah top dan left yang akan membantu meletakkan posisi segitiganya lebih rapi. Hasilnya nanti seperti ini nih :
Akhirnya jadi juga desainnya.. Sekarang langkah terakhir adalah tinggal mengatur bagaimana supaya layer tooltip itu tidak tampil dalam keadaan biasa, tapi langsung muncul ketika mouse diarahkan ke link tersebut.. Caranya adalah dengan bantuan display:none pada selector .tooltip, dan display:block; ketika link diarahkan. Codenya seperti ini: .tooltip{display:none;} /*dalam keadaan biasa tidak tampil*/ a.link:hover .tooltip{display:block;} /*ketika mouse diarahkan ke a.link, tooltip ditampilkan*/
Demikianlah cara membuat tooltip sederhana dengan modal CSS.. Semoga artikel ini bermanfaat untuk kita semua, dan membantu kita lebih menguasai CSS lebih dalam lagi.. :)
Tentang Penulis Christian Rosandhy Saya adalah seorang penggemar komputer, terutama di bagian CSS atau PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya sedang berusaha belajar sebanyak-banyaknya.
