Pos

Menampilkan postingan dari Oktober, 2014

Membuat Inline Help Tips hanya dengan CSS

Gambar
Cara membuat inline help tips atau tooltip teks bantuan menggunakan HTML dan CSS. Tooltip ini akan membantu pengunjung mendapat penjelasan-penjelasan tanpa diarahkan ke halaman lain. Cukup meng-hover tooltip maka penjelasan-penjelasan akan tampil.

DEMO

Sudah tahu tooltip kan? Jika belum silahkan baca artikel: Membuat Tooltip Menggunakan CSS, Tooltip Sederhana Menggunakan jQuery.

Mula-mula tulislah markup untuk si tooltip. Inilah contohnya:

<div class="help-tip"> <p>Ini adalah contoh tooltip. Membuatnya dengan HTML dan CSS. Ikuti tutorialnya di sini.</p> </div>
Elemen <p> akan ditampilkan sebagai tooltip, dan kelas div .help-tip adalah bulatan biru dengan tanda tanya di dalamnya. Saat kelas div .help-tip di-hover maka isi dalam elemen <p> akan ditampilkan. Jadi secara default paragraf atau <p> disembunyikan dan hanya akan terlihat saat hover. Isi paragraf bisa apa saja, teks, gambar, atau HTML lainnya.

Gunakan CSS ini untuk membuat…