Halo sahabat dumet, dikesempatan kali ini kita akan membahas tentang Cara Membuat Tooltip Images dengan CSS3. Pada dasarnya tooltip merupakan sebuah dialog atau kolom text kecil yang akan tampil ketika cursor diarahkan pada element.
Tooltip biasanya berupa sebuah informasi yang terkait pada element tersebut. Contoh sederhananya seperti pada gambar dibawah ini :
Pada gambar diatas merupakan sebuah contoh Tooltip text (dialog), dan dipembahasan kali ini kita akan mengkostum yang biasanya tooltip berupa sebuah text/dialog namun kali ini adalah berupa sebuah gambar.
Penasaran ya teman-teman ? oke langsung saja kita mulai Cara Membuat Tooltip Images dengan CSS3. Pertama-tama buatlah sebuah folder lalu siapkan satu buah gambar bebas terserah teman-teman, kemudian jalankan/run text-editornya, lalu ketiklah script HTML seperti pada gambar dibawah ini :
Pada gambar script html diatas silahkan teman-teman sesuaikan nama serta format gambar yang teman-teman gunakan. Jika sudah langkah selanjutnya teman-teman tambahkan script CSS nya seperti pada gambar dibawah ini :
Pada kode css diatas menjelaskan bahwa yang kita berikan .tooltipimg akan kita hidden terlebih dahulu dan kita hover atau tampilkan ketika cursor mengarah pada element/object tsb.
Oke jika sudah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Bagaimana ? unik bukan teman-teman, contoh diatas merupakan hasil saya sendiri berexperiment dengan tooltips. Dan untuk kedepannya silahkan teman-teman modifikasi sendiri sesuai selera teman-teman dengan acuan dasar seperti diatas.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Tooltip Images dengan CSS3. Semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih