RSSAsp.net

Cách hiển thị tooltip khi rê chuột vào hình hoặc link sử dụng clueTip

Hôm này mình sẽ hướng dẫn các bạn một phần không thể thiểu đa số các trang web về tin tức và sản phẩm đều sử dụng hiệu ứng rê chuột và hình ảnh hoặc link thì sẽ hiện thị lên một thông tin mô tả ngắn tương ứng.



Xem Demo : http://www.hoclaptrinhweb.com/code/tooltip/clueTip.html
 

tooltip_rechuot


Thực hiện :

Tham khảo đầy đủ ví dụ và code ở đây http://plugins.learningjquery.com/cluetip/demo/

Bước 1 : Đăng ký thư viện javascript để sử dụng hiệu ứng 
 

HTML:

<script src="http://www.hoclaptrinhweb.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.hoclaptrinhweb.com/js/jquery.cluetip.min.js" type="text/javascript"></script>
 

Bước 2 : Đăng ký css
 

HTML:
<link href="http://www.hoclaptrinhweb.com/code/tooltip/jquery.cluetip.css" rel="stylesheet"
       type="text/css" />
 

Bước 3 : Viết code html cho phần muốn hiển thị tooltip
 

HTML:
<ul class="newsitem">
            <li><a rel="http://www.hoclaptrinhweb.com/Handler/tooltip.ashx?id=25993" href="http://www.hoclaptrinhweb.com/tin-cong-nghe/169-usd-la-nguong-gia-moi-nhat-cua-tablet-hltw25994.aspx"
                 title="169 USD là ngưỡng giá mới nhất của tablet">169 USD là ngưỡng giá mới nhất
                    của tablet</a></li>
            <li><a rel="http://www.hoclaptrinhweb.com/Handler/tooltip.ashx?id=25993" href="http://www.hoclaptrinhweb.com/tin-cong-nghe/cuoc-dua-ung-dung-nhan-tin-mien-phi-gay-can-tren-toan-the-gioi-hltw25993.aspx"
                 title="Cuộc đua ứng dụng nhắn tin miễn phí gay cấn trên toàn thế giới">Cuộc đua
                    ứng dụng nhắn tin miễn phí gay...</a></li>
            <li><a rel="http://www.hoclaptrinhweb.com/Handler/tooltip.ashx?id=25992" href="http://www.hoclaptrinhweb.com/tin-cong-nghe/tan-dung-tiep-thi-truyen-thong-xa-hoi-tren-thiet-bi-di-dong-hltw25992.aspx"
                 title="Tận dụng tiếp thị truyền thông xã hội trên thiết bị di động">Tận dụng tiếp
                    thị truyền thông xã hội trên...</a></li>
        </ul>
 

ở đoạn code trên chúng ta chú ý thuộc tính rel trong thẻ a, đó chúng là đường link chứa dữ liệu cần hiển thì ở tooltip. Ví dụ ta có rel="http://www.hoclaptrinhweb.com/Handler/tooltip.ashx?id=25993" thì khi bạn rê chuột tới thẻ a thì nó sẽ lấy dữ liệu đường link trong thuộc tính rel hiển thị lên.

Bước 4 : Khai báo hàm javascript để đăng ký sự kiện rê chuột vào đường link hay thẻ a
 

HTML:
jQuery(document).ready(function ($)
            {
                $('.newsitem a').cluetip({
                    width: '400px',
                    showTitle: true,
                    positionBy: 'topBottom',
                    topOffset: 20,
                    cluezIndex: 100
                });
            });
 

Kết luận :

  • Bạn có thể áp dụng sử dụng load dữ liệu từ database và datalist hay repeater
  • Tooltip này được áp dụng ở http://www.hoclaptrinhweb.com
  • Bạn nào có thắc mắc gì thì thảo luận ở đây nhé
  • Các bạn có thể tùy biến hiển thị tooltip như thông tin sản phẩm, phóng to hình ảnh ....

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu