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.