Membuat Tooltip dengan CSS

Dalam artikel ini saya bahas cara cepat bikin tooltip dengan CSS (SCSS), tanpa JavaScript. Di sini saya bikin tooltip yang tampil di atas dan di samping elemen parent-nya. Saya mulai dari struktur HTML & CSS dasarnya dulu:

Jadi kelas utamanya .tooltip & untuk ngatur posisinya ada kelas .top untuk tampilan tooltip di atas & kelas .right untuk tampilan di samping kanan.

Bukan tooltip namanya kalo nggak ada pointer segitiganya. Caranya saya kopas aja dari sini: CSS Triangle.

Yang pertama, saya bikin tooltip tanpa border. Ini gampang sekali. Tinggal nempelin segitiga di bawah atau di samping. Untuk nampilin segitiga, saya pake pseudo-element :after.

Continue reading →