Tooltip

Tooltip memberi penjelasan singkat tentang elemen antarmuka yang mungkin kurang jelas bagi pengguna. Komponen ini muncul saat pengguna melakukan hover atau focus pada elemen tertentu dan membantu mereka memahami arti, fungsi, atau konteks tanpa mengganggu tampilan utama.

Penggunaan

Gunakan Tooltip untuk memberikan konteks tambahan pada ikon, label, singkatan, atau fitur yang perlu dijelaskan secara ringkas. Komponen ini berguna ketika label terlalu pendek untuk menampilkan informasi lengkap atau saat dibutuhkan bantuan kontekstual tanpa mengubah tata letak halaman.

Kategori

Basic Tooltip

Menampilkan teks pendek tanpa media atau tombol aksi. Digunakan untuk penjelasan singkat pada ikon, label, atau tombol kecil.

Light Tooltip

Memiliki latar terang dengan teks gelap. Cocok digunakan pada area UI dengan latar gelap atau netral.

Dark Tooltip

Memiliki latar gelap dengan teks terang. Cocok digunakan pada area UI dengan latar terang untuk menjaga kontras dan keterbacaan.

Media Tooltip

Menampilkan gambar atau thumbnail di dalam tooltip. Cocok digunakan untuk preview konten, konteks visual, atau informasi tambahan yang membutuhkan dukungan visual.

Cara Penggunaan yang Disarankan

✅ Disarankan

Tampilkan hanya satu tooltip dalam satu waktu untuk menjaga fokus dan keterbacaan pengguna.

❌ Dihindari

Jangan tampilkan beberapa tooltip sekaligus, karena dapat membingungkan pengguna dan mengganggu konteks interaksi.

Penerapan

Penjelasan (Ikon)

Gunakan tooltip untuk menjelaskan arti dari ikon atau singkatan, seperti ikon edit, hapus, atau ekspor.

Tambahan Penjelasan

Gunakan tooltip untuk memberikan deskripsi tambahan pada label yang panjang namun terbatas ruangnya.

Penjelasan Fitur

Gunakan tooltip untuk memberikan petunjuk singkat pada fitur baru atau fungsi yang mungkin belum familiar bagi pengguna.

Guided Tour pada Halaman User Management

Contoh ini menampilkan penggunaan tooltip atau guided tour sebagai panduan interaktif yang membantu pengguna memahami fungsi elemen di halaman.

Dalam konteks ini, tooltip memberikan penjelasan tentang fitur user management yang digunakan untuk mengatur dan mengelola hak akses pengguna di sistem Identity and Access Management (IAM). Tooltip muncul secara bertahap untuk memandu pengguna menyelesaikan proses tanpa kehilangan konteks halaman.

Spesifikasi