MoreLesson 174Preview gratis
Tooltips
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas tooltip, yaitu teks bantuan kecil yang muncul saat pengguna mengarahkan kursor atau memfokuskan elemen. Tooltip biasanya dibuat dengan pseudo-element dan atribut data agar tidak menambah banyak markup. Agar ramah aksesibilitas, tooltip juga harus muncul saat elemen difokuskan keyboard dan tidak menjadi satu-satunya tempat informasi penting.
Poin kunci
- Kontainer tooltip perlu position: relative agar teks bantuan dapat diposisikan absolut
- Gunakan pseudo-element ::after dengan content: attr(data-tooltip) untuk isi tooltip
- Tampilkan tooltip pada :hover dan :focus-visible, bukan hanya saat mouse berada di atas elemen
- Hubungkan teks bantuan dengan aria-describedby bila tooltip berisi informasi penting
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.