Tooltip là gì?
Tooltip (chú thích hiện khi rê chuột) là một hộp văn bản nhỏ xuất hiện khi người dùng di chuột lên hoặc đặt focus vào một phần tử giao diện, thường là icon, nút hoặc đường link có chữ bị cắt bớt. Nội dung bên trong thường chỉ có một vài từ đến một câu ngắn, đủ để giải thích phần tử đó làm gì.
Ví dụ thực tế: khi bạn rê chuột vào icon ba chấm (…) trên một thanh công cụ, hộp chữ nhỏ hiện lên ghi “Xem thêm tuỳ chọn”, đó là tooltip. Hay khi form đăng ký email có icon dấu hỏi cạnh ô “Ngày sinh”, rê chuột vào thấy “Thông tin dùng để gửi ưu đãi sinh nhật”, đó cũng là tooltip.
Về mặt kỹ thuật, tooltip cơ bản nhất chỉ cần thuộc tính HTML title trên một thẻ bất kỳ. Tuy nhiên, trình duyệt render tooltip từ title trông rất thô và không kiểm soát được giao diện, nên thực tế khi làm web chuyên nghiệp thường dùng CSS hoặc JavaScript để tự dựng tooltip với giao diện phù hợp thương hiệu.
Tooltip xuất hiện ở đâu trong giao diện?
Tooltip hay xuất hiện nhất ở các thanh công cụ (toolbar) chứa nhiều icon nhỏ không có chú thích chữ bên cạnh. Người thiết kế dùng icon để giữ giao diện gọn, nhưng cần tooltip để người dùng hiểu từng nút làm gì mà không phải đoán.
Ngoài ra, tooltip còn xuất hiện ở các trường form có thêm thông tin giải thích (input field kèm icon dấu hỏi), nút hành động có chức năng không hiển nhiên, hoặc đoạn văn bản bị cắt ngắn bằng dấu “…” mà muốn người dùng biết nội dung đầy đủ khi hover.
Trong các phần mềm quản trị nội dung, bảng điều khiển hoặc trang cài đặt, tooltip rất phổ biến vì những nơi này có nhiều tùy chọn kỹ thuật cần giải thích mà không muốn làm rối giao diện bằng chữ dài.
Tooltip, popover và modal: ba thứ gần mà không giống nhau
Nhiều người hay dùng lẫn tooltip, popover (hộp thông tin nhỏ bật lên khi nhấn) và modal (cửa sổ overlay che nền). Ba thứ này có hình thức hơi giống nhau, nhưng mục đích và cách tương tác khác nhau rõ ràng.
Tooltip hiện khi hover, biến mất khi chuột đi khỏi, không cần người dùng nhấn gì. Nội dung ngắn, thụ động, chỉ để giải thích. Popover cần một hành động kích hoạt (thường là nhấn vào icon), có thể chứa nội dung dài hơn, đôi khi có nút bên trong, và cần nhấn nút đóng hoặc nhấn ra ngoài để tắt. Modal thì nặng hơn nhiều: nó che toàn bộ nền phía sau, buộc người dùng phải tương tác trước khi quay lại trang, thường dùng cho xác nhận quan trọng hoặc form điền dữ liệu.
Quy tắc chọn: nếu chỉ cần giải thích 1-2 câu và người dùng không cần làm gì thêm, dùng tooltip. Nếu cần giải thích dài hơn hoặc có nút hành động bên trong, dùng popover. Nếu cần người dùng phải đọc kỹ và xác nhận, dùng modal. Bạn có thể tìm hiểu thêm về modal là gì để so sánh cụ thể hơn.
Quy trình 3 bước quyết định có nên đặt tooltip không
Bước 1 là hỏi: thông tin này có thể bỏ qua không? Nếu câu trả lời là không, tức là người dùng cần đọc thông tin đó để tránh nhầm lẫn, thì đừng giấu vào tooltip. Đưa nó ra ngoài thành label rõ ràng hoặc text mô tả bên dưới trường. Tooltip không thay thế được label.
Bước 2: người dùng có cần đọc trước khi nhấn không? Nếu có, tooltip không đủ vì nhiều người không rê chuột trước khi nhấn, đặc biệt trên điện thoại cảm ứng. Hãy nghĩ tới popover hoặc text giải thích luôn hiển thị.
Bước 3: người dùng trên điện thoại có tiếp cận được không? Tooltip thuần hover không hoạt động trên màn hình cảm ứng vì không có chuột. Nếu phần lớn người dùng của bạn vào bằng điện thoại, bạn cần giải pháp khác, hoặc dùng tooltip kết hợp tap-to-show (nhấn vào icon để hiện tooltip rồi nhấn lại để tắt).
Trong thực tế thiết kế web, tooltip phù hợp nhất với ứng dụng web phức tạp dành cho desktop, nơi người dùng có chuột và biết hover để khám phá. Với trang marketing hay thương mại điện tử nơi khách hàng chủ yếu dùng điện thoại, tooltip cần được thiết kế lại hoặc thay bằng giải pháp khác. Đây là loại quyết định mà quá trình thiết kế micro interaction thường phải cân nhắc kỹ.
Cách làm tooltip tốt: từ nội dung đến kỹ thuật
Về nội dung, tooltip nên ngắn gọn tuyệt đối. Một câu, tối đa 10-15 từ. Bắt đầu bằng động từ hoặc mô tả trực tiếp chức năng, không cần lịch sự hay dẫn dắt. “Xóa mục này” tốt hơn “Nhấn vào đây để xóa mục đã chọn”.
Về giao diện, tooltip cần có đủ tương phản với nền. Màu nền tối với chữ sáng là lựa chọn phổ biến và dễ nhận ra. Kích thước chữ không nên nhỏ hơn 12px. Tooltip nên hiện sau một khoảng trễ nhỏ, khoảng 300-500ms, để không bật lên ngay khi người dùng chỉ di chuột qua vô tình.
Về vị trí, tooltip nên hiện gần phần tử mẹ nhưng không che nội dung quan trọng. Nếu phần tử ở góc màn hình, tooltip cần tự điều chỉnh hướng để không bị cắt. Thư viện như Floating UI hoặc Popper.js xử lý tốt phần vị trí này mà không cần tự xử lý thủ công.
Một điểm hay bị bỏ qua là khả năng tiếp cận (accessibility). Tooltip phải có thể kích hoạt bằng bàn phím (focus vào phần tử rồi tooltip hiện), và nội dung tooltip phải được đọc bởi screen reader (công cụ đọc màn hình cho người khiếm thị). Thuộc tính aria-describedby là cách chuẩn để làm điều này. Những trang web thuộc lĩnh vực dịch vụ công hoặc giáo dục bỏ qua phần này khá nhiều.
Khi nào không nên dùng tooltip
Tooltip không phù hợp để chứa thông tin bắt buộc phải đọc trước khi hành động. Nếu người dùng cần biết thông tin đó để điền form đúng hoặc để tránh nhầm, đặt text đó hiển thị luôn, không giấu vào tooltip.
Tránh dùng tooltip cho các phần tử trên trang marketing dành cho điện thoại. Hover không tồn tại trên cảm ứng, người dùng không thể thấy tooltip kiểu này. Cũng tránh dùng tooltip để chứa thông tin lỗi hoặc cảnh báo, vì người dùng hay bỏ qua hoặc không biết rê chuột vào để xem. Thông báo lỗi cần hiển thị luôn, không cần hover.
Tooltip cũng không nên dùng cho những phần tử có chữ rõ ràng rồi. Nếu nút đã ghi “Lưu bản nháp”, không cần tooltip ghi thêm “Nhấn để lưu bản nháp”. Giao diện nào mà icon và nút đã có chú thích đủ rõ, như hamburger menu quen thuộc hay sticky header với chữ danh mục rõ ràng, thường không cần thêm tooltip.
Người không rành kỹ thuật cần biết gì về tooltip?
Nếu bạn đang làm việc với đội thiết kế hoặc đặt hàng thiết kế website, biết về tooltip giúp bạn trao đổi rõ hơn. Khi thấy một phần tử giao diện mà bạn không hiểu chức năng, hãy hỏi đội thiết kế: “Cái này có tooltip không?” thay vì “Cái này làm gì?”
Khi nhận bàn giao thiết kế, hãy kiểm tra các icon trong giao diện có tooltip chưa, và tooltip đó có hoạt động trên điện thoại không. Đây là câu hỏi thực tế ảnh hưởng trực tiếp đến trải nghiệm người dùng, đặc biệt nếu web của bạn dùng nhiều icon trong trang quản trị hay ứng dụng nội bộ.
Câu hỏi thường gặp
Tooltip có ảnh hưởng tới SEO không?
Nội dung trong tooltip thường bị ẩn bằng CSS và Google có thể thấy trong DOM, nhưng vì không phải nội dung chính, đừng nhồi từ khoá vào đó. Dùng tooltip để giải thích giao diện, không để tối ưu tìm kiếm.
Tôi có thể dùng thuộc tính title của HTML để làm tooltip không?
Được, nhưng tooltip từ title có nhiều hạn chế: không hoạt động trên điện thoại, giao diện xấu và không tùy chỉnh được, một số trình duyệt tự ẩn sau vài giây. Chỉ dùng title như lớp dự phòng (fallback) cùng với tooltip tự dựng bằng CSS hoặc JavaScript.
Tooltip và hint có khác nhau không?
Hint thường chỉ nội dung placeholder bên trong ô input, là chữ mờ hiển thị trước khi người dùng gõ. Tooltip là hộp chữ tách biệt hiện khi hover hoặc focus. Hai thứ khác nhau về cách dùng và vị trí, dù cùng mục đích hỗ trợ người dùng hiểu thêm về phần tử.
Dự án website của mình có cần thiết kế tooltip không?
Không nhất thiết. Landing page hay blog thường không cần tooltip vì giao diện đơn giản, chữ đã rõ. Tooltip phù hợp hơn với bảng điều khiển, trang cài đặt hoặc những khu vực có nhiều icon cần giải thích mà không muốn làm rối giao diện bằng chữ.
Nếu bạn đang lên kế hoạch thiết kế giao diện và muốn biết nên đặt tooltip ở đâu cho đúng, việc có một buổi tư vấn UX trước khi làm giúp tiết kiệm nhiều lần sửa sau. Xem dịch vụ thiết kế UI/UX của Web22 nếu muốn bắt đầu từ đúng chỗ.