CSS AdvancedLesson 61Preview gratis
CSS Tooltips
Lesson ini bagian dari CSS · Semua level
Ringkasan
Tooltip adalah kotak kecil berisi tambahan informasi yang muncul saat pengguna menyentuh atau menyorot sebuah elemen. Dengan CSS murni, tooltip umumnya dibuat memakai pseudo-element `::after` atau `::before` yang disembunyikan lalu ditampilkan pada keadaan `:hover`. Teks tooltip biasanya diambil dari atribut HTML dengan fungsi `attr()`.
Poin kunci
- Tooltip dibangun dari pseudo-element `::after` yang mengisi `content`
- `content: attr(data-tip)` membaca teks dari atribut kustom `data-tip`
- Tooltip disembunyikan dengan `opacity: 0` lalu ditampilkan pada `:hover`
- Induk tooltip memerlukan `position: relative` agar tooltip menempel di posisi yang tepat
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.