Trong hướng dẫn siêu nhanh này, bạn sẽ học cách hiển thị văn bản mô tả ngắn (như tooltip) khi người dùng di chuột qua một phần tử, như hình ảnh hoặc liên kết.
Cách thêm tooltip chỉ mất vài giây. Bạn chỉ cần dùng thuộc tính title của HTML: title.
Hiển thị văn bản khi di chuột qua (hover)
Dưới đây là ví dụ cơ bản của hình ảnh Rubik's Cube. Di chuột qua hình ảnh này và trong vài giây thông tin thêm về Rubik's Cube sẽ hiện ra:
Đây là mã HTML cho phần tử hình ảnh trên:
<img src="url-tệp-hình-ảnh" title="Rubik's Cube. Một đồ chơi ghép hình 3-D được phát minh năm 1974 bởi nhà điêu khắc người Hungary Ernő Rubik." alt="Một Rubik's Cube" />Giả sử bạn muốn hiển thị tooltip khi người dùng di chuột qua phần tử liên kết/anchor.
Di chuột qua liên kết này để hiện tooltip
Và mã HTML:
<a href="https://techstacker.com" title="Liên kết đến trang chủ TechStacker" >Bài viết mới nhất</a>Chỉ có vậy thôi. Bạn có thể thêm thuộc tính title vào bất kỳ phần tử HTML nào.
Tại sao việc hiển thị văn bản khi người dùng di chuột qua phần tử lại có lợi?
Giả sử bạn có một phần tử có thể gây nhầm lẫn cho một số người do sự đơn giản của nó. Ví dụ có thể là một biểu tượng (icon). Hầu hết mọi người không thể nhận ra nhiều hơn một nắm tay biểu tượng, nhưng có hàng nghìn biểu tượng khác nhau được hiển thị, chỉ ở phương Tây thôi.
Bằng cách đơn giản thêm thuộc tính title vào một biểu tượng (ví dụ bên trong phần tử image), mọi người có tùy chọn nhận được mô tả rõ ràng về chức năng của biểu tượng đó bất kể nó tồn tại ở đâu trong UI của bạn.
Bây giờ bạn có thể tự nghĩ, có bao nhiêu người biết rằng di chuột qua một phần tử đôi khi sẽ tiết lộ thông tin thêm?
Đó là câu hỏi tuyệt vời. Câu trả lời là phụ thuộc vào đối tượng mục tiêu của bạn. Hầu hết người rành công nghệ đều 직관地 biết rằng di chuột + chờ 1-2 giây thường sẽ tiết lộ thông tin thêm về chủ đề.
Nhưng nếu đối tượng của bạn chủ yếu là người không rành công nghệ, hoặc có lẽ chỉ là những người không lướt web nhiều?
Vâng, thì hành động mặc định của tôi là áp dụng lời khuyên phổ quát của Luke Wroblewski:
Rõ ràng luôn thắng.
Nếu một biểu tượng không rõ ràng, hoặc ít nhất không rõ ràng với tỷ lệ cao mọi người, thì bạn hoặc làm một biểu tượng tốt hơn, hoặc ghép cặp biểu tượng đó với một mô tả ngắn gọn.
Dù sao, thêm thuộc tính title, và tất nhiên, thuộc tính ALT (cho trình đọc màn hình, cho người khiếm thị) chỉ có lợi. Bạn không cần thêm cho mọi thứ, nhưng nếu bạn đang băn khoăn, bạn nên làm nó.
Là một lợi ích thêm, ít nhất thuộc tính ALT cũng có tác động đến SEO, gián tiếp, nhưng có lẽ cũng trực tiếp.
Làm sao? Vâng, mô tả ALT rơi vào danh mục truy cập (accessibility), mà Google chưa từng giấu diếm có tác động đến cách họ đánh giá chất lượng trang web, sẽ ảnh hưởng đến sức mạnh xếp hạng SEO.
Còn thuộc tính title, nó cũ giờ ảnh hưởng SEO, nhưng dựa trên nghiên cứu mới nhất của tôi, chưa rõ nó còn ảnh hưởng ngày nay không. Nhưng lại nói, không có mặt trái rõ ràng khi dùng title, chỉ có mặt tốt.
Phương pháp tooltip thay thế
Bạn có thể cần một phiên bản tùy chỉnh hơn của tooltip/title tích hợp sẵn HTML. Trong trường hợp đó, bạn có thể dùng JavaScript và CSS để cả thời gian và định kiểu tooltip cho các trường hợp sử dụng khác nhau. Tôi sẽ bao gồm kỹ năng hữu ích đó trong hướng dẫn tương lai (nó nằm trong danh sách cần viết của tôi!).