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 !

5 Nhận xét on "Tạo tính năng Tooltips với CSS"

NAD on 29 July 2009 at 21:29 said...

Bước để sử dụng hơi mất thời gian mỗi khi chèn :D

Pika Rock on 29 July 2009 at 21:50 said...

yo \:D/ thủ thuật hay, check thôi

boyproDX on 30 July 2009 at 00:24 said...

@NAD : Dùng nhiều sẽ quen :D
@Pika Rock : :D

cuong on 30 July 2009 at 00:47 said...

thanks :D


Clip: Mỹ Tâm ngất xỉu trên sân khấu
http://maimaitinhban.com/forum/showthread.php?t=497

Hiếu bò on 13 December 2010 at 20:34 said...

Có cách nào làm tất cả các link khi di chuột vào sẽ hiển thị phần "title" dưới dạng tooltips bằng css thía này không bác ... Em muốn làm với Bo-blog

http://bokute.com

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3