<>Tooltips là các hộp nhỏ chứa thông tin bổ sung xuất hiện khi người dùng di chuột (hover), nhấn (tap), hoặc giữ chuột (focus) vào một phần tử. Tooltips giúp giải thích các chức năng mà không làm UI trở nên lộn xộn.🚀 Mục tiêu chính:
✅ Cung cấp thông tin ngắn gọn về một nút hoặc tính năng.
✅ Hướng dẫn người dùng mà không chiếm nhiều không gian UI.
✅ Tăng tính dễ sử dụng cho ứng dụng hoặc website.
/Khi nào nên sử dụng Tooltips?
✅ Khi một biểu tượng hoặc nút không rõ ràng → Ví dụ: Icon 🛠️ có tooltip “Cài đặt”.
✅ Khi cần giải thích thêm nhưng không muốn làm UI rối → Ví dụ: Tooltip hiển thị định nghĩa của một thuật ngữ.
✅ Khi cung cấp mẹo sử dụng hoặc cảnh báo nhỏ → Ví dụ: Tooltip trên nút “Lưu” giải thích rằng thay đổi sẽ có hiệu lực ngay lập tức.
🚫 Không nên dùng nếu:
– Nội dung hiển thị đã rõ ràng.
– Người dùng phải phụ thuộc vào tooltips để hiểu UI (dấu hiệu UI cần cải thiện).
– Cần nội dung quan trọng (dùng Modals hoặc Alerts thay vì Tooltips).
/Cấu trúc của Tooltips
🔹 Kích hoạt (Trigger): Di chuột, nhấn hoặc giữ chuột vào phần tử.
🔹 Nội dung (Content): Văn bản ngắn gọn hoặc mô tả chức năng.
🔹 Vị trí (Positioning): Xuất hiện gần phần tử, thường ở trên, dưới, trái hoặc phải.
🔹 Thiết kế (Design): Nhỏ gọn, có bóng nhẹ, không che mất nội dung quan trọng.
📌 Ví dụ Tooltips trong thực tế:
🛠️ Icon cài đặt → Khi hover vào biểu tượng ⚙️, tooltip hiện “Cài đặt”.
🔑 Trường nhập mật khẩu → Tooltip nhắc “Mật khẩu phải có ít nhất 8 ký tự”.
📊 Biểu đồ dữ liệu → Khi hover vào điểm trên biểu đồ, tooltip hiển thị giá trị cụ thể.
/Best Practices khi thiết kế Tooltips
✅ Ngắn gọn & dễ hiểu → Không quá 2 dòng, tránh dài dòng.
✅ Đừng lạm dụng → Nếu UI cần quá nhiều tooltips, có thể UX đang có vấn đề.
✅ Hiển thị đúng lúc → Xuất hiện khi người dùng cần nhưng không quá nhanh gây phiền.
✅ Tự động ẩn sau vài giây hoặc khi người dùng di chuyển chuột đi.
✅ Tương phản rõ ràng → Đảm bảo dễ đọc trên nền màu khác nhau.
