Tạo tính năng Tooltips với CSS

Tooltips là công cụ nhỏ gọn cho phép Blogger có thể chèn một đoạn thông tin ngắn vào bất kì nội dung nào trong Blog, giúp người đọc có thể hiểu rõ hơn về giao diện của mình. Có khá nhiều cách để tạo Tooltips như JS, jQuery ... ; tuy nhiên do các cách trên hơi dài dòng nên trong bài viết này, mình sẽ hướng dẫn các bạn tạo Tooltips bằng ngôn ngữ CSS nhỏ gọn.

Toàn bộ code của thủ thuật này chỉ chiếm dung lượng <1KB nên bạn không phải lo ảnh hưởng đến tốc độ truy xuất Blog. Đồng thời nó hoạt động tốt trên mọi trình duyệt, kể cả IE6 lỗi thời. Bạn có thể xem screenshot của Tooltips ngay bên dưới đây:

Để tạo chức năng này cho Blog, bạn hãy thực hiện các bước dưới đây :

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ a:hover trong template như hình dưới:
   
   
   rồi dán đè lên nó bằng đoạn code dưới đây :
   
   a:hover {background:#ffffff; text-decoration:none;}
   a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:150px;}
   a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
3. Save lại template. Vậy là bạn đã thiết lập được tính năng Tooltips cho Blog.
4. Để sử dụng chức năng này, bạn sử dụng cú pháp :
   
   <a class="tooltip" href="#">Tiêu đề<span>Nội dung hiển thị trong Tooltips</span></a>

Vậy là bạn đã tạo được chức năng Tooltips cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ làm bạn hài lòng. Chúc vui !