• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng tooltips chỉ dùng CSS

5
25/03/2011

Chúng ta đều biết hiệu ứng tooltips được dùng phổ biến trong thiết kế web, nó giúp hiển thị thêm thông tin về một liên kết khi rê trỏ qua liên kết đó. Để tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Bài viết này giới thiệu một cách tạo hiệu ứng tooltips như vậy.

Bạn hãy rê trỏ vào các liên kết trong đoạn text dưới đây để xem demo. Trong demo có 3 định dạng khác nhau theo thứ tự Style 1, Style 2, Style 3.

This is a practical, elegant CSS tooltipĐể tạo tooltips, người ta có thể dùng CSS, Javascript, jQuery … tuy nhiên với phương châm load trang nhanh thì dùng CSS sẽ tốt hơn. Use it to display additional information about a link or any other element when the mouse moves over it. A customizable tooltipCó thể tùy biến tooltip một cách dễ dàng pops up, which works in all modern browsers. Unlike a regular tooltip (ie: one created using the "title" attribute), Cool CSS TooltipTooltip chỉ dùng CSS rất đơn giản và gọn nhẹ continues to display itself and follow the mouse around while the mouse is anywhere over the link/HTML element.


Để thực hiện, bạn hãy làm theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>.

/* Tooltip with CSS
----------------------------------------------- */
a.tt{
position:relative;
z-index:24;
color:#3CA3FF; /* Màu text cho liên kết */
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; cursor:help;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000; /* Màu text cho mô tả */
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/TmNok) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/DqRTW) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/e8oAy) no-repeat bottom;
}

Trên đây là CSS cho Style 1. Nếu bạn muốn Style 2 thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/hIWel) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/wg17s) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/3RTsz) no-repeat bottom;
}

Nếu bạn muốn Style 3 thì thay bằng đoạn code bên dưới.

a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://goo.gl/i7YJE) no-repeat top;
}
a.tt:hover span.middle{
display: block;
padding: 0 8px;
background: url(http://goo.gl/NZ5f1) repeat bottom;
text-decoration:none;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
background: url(http://goo.gl/jiFUt) no-repeat bottom;
}

Lưu Template.

Bước 2. Thiết lập cấu trúc HTML cho liên kết như sau.

<a href="URL_Liên kết" class="tt">Text liên kết<span class="tooltip"><span class="top"></span><span class="middle">Đoạn text thông tin mô tả cho liên kết</span><span class="bottom"></span></span></a>

Hy vọng thủ thuật nhỏ này giúp ích nhiều cho blogspot của bạn. :47)

{5 bình luậnAdd yours ?}

17:25:00, 25 thg 3, 2011

chưa tương thích với Firefox 4 bác à, em duyệt bằng FF4 thấy không chạy.

Reply
19:27:00, 25 thg 3, 2011

Đúng là FF4 mới ra bản beta nên chưa tương thích với tooltips này. :67)

Reply
21:22:00, 25 thg 3, 2011

ra bản chính thức rồi bác :54)

Reply
16:32:00, 21 thg 5, 2011

đã thích ứng với FF4,các pak test lại xem

Reply
19:06:00, 7 thg 9, 2011

Cái demo bị die rùi hay sao anh Hà ạ!

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn