Cara Membuat Tooltip Images dengan CSS3
Halo rekan rekan dumet, dikesempatan kali ini kita akan membahas mengenai Cara Membangun Tooltip Images dengan CSS3. Di dasarnya tooltip adalah sebuah dialog atau kolom text kecil yang akan tampil ketika cursor diarahkan di element.
Tooltip biasanya berupa sebuah informasi yang terkait di element tersebut. Contoh sederhananya seperti di gambar dibawah ini :
Di gambar diatas adalah sebuah contoh Tooltip text (dialog), dan dipembahasan kali ini kita akan mengkostum yang biasanya tooltip berupa sebuah text/dialog namun kali ini yakni berupa sebuah gambar.
Penasaran ya teman-teman ? oke seketika saja kita mulai Cara Membangun Tooltip Images dengan CSS3. Pertama-tama-tama buatlah sebuah folder lalu siapkan satu buah gambar bebas terserah teman-teman, kemudian jalankan/run text-editornya, lalu ketiklah script HTML seperti di gambar dibawah ini :
Di gambar script html diatas silahkan teman-teman sesuaikan nama serta format gambar yang teman-teman gunakan. Kalau telah langkah berikutnya teman-teman tambahkan script CSS nya seperti di gambar dibawah ini :
Di kode css diatas menjelaskan bahwa yang kita berikan .tooltipimg akan kita hidden terlebih dahulu dan kita hover atau tampilkan ketika cursor mengarah di element/object tsb.
Oke apabila telah silahkan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Kalau benar karenanya hasilnya akan menjadi seperti di gambar dibawah ini :
Bagaimana ? unik bukan teman-teman, contoh diatas adalah hasil saya sendiri berexperiment dengan tooltips. Dan bagi kedepannya silahkan teman-teman modifikasi sendiri sesuai selera teman-teman dengan rujukan basic seperti diatas.
Oke kalau demikian itu lumayan sekianlah pembahasan kali ini mengenai Cara Membangun Tooltip Images dengan CSS3. Semoga dapat bermanfaat dan hingga bertemu dipembahasan berikutnya.
Terimakasih
Sumber https://kursuswebsite.org
