jQuery Sticky Tooltip

Demo: http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

 

 

Sticky Tooltip – plugin của jQuery giúp website chúng ta có thêm nhiều thông tin hơn bằng cách sử dụng tooltip.

Tooltip sẽ được hiện lên khi chúng ta rê chuột vào bất cứ phần tử nào của trang web ( thẻ a , hình ảnh … ) và có thể được giữ lại trên màn hình bằng cách bấm phím ‘s’ hoặc click chuột phải. Nội dung của mỗi tooltip là các đoạn mã HTML vì thế rất dễ dàng cho chúng ta chỉnh sửa.

Cách sử dụng :

Trước tiên, bạn cần download jQuerystickytooltip.jsstickytooltip.css. Sau đó thêm vào trong thẻ <head> của trang web:

1 <script type="text/javascript" src="js/jquery.js">
2 <script type="text/javascript" src="js/stickytooltip.js">
3 <link rel="stylesheet" type="text/css" href="css/stickytooltip.css" />

Định vị trí cần hiện tooltip (data-tooltip=”sticky1″ là nơi ta sẽ lấy tooltip):

1 <p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>

Tạo nội dung tooltip:

1 <div id="mystickytooltip" class="stickytooltip">
2 <div id="sticky1" class="atip" style="width:200px"><imgsrc="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />Thailand boasts some of the most popular and luxurious resorts in Asia.</div>
3 </div>

Chú ý : Tất cả tooltip phải để trong thẻ DIV có class là “stickytooltip” và id là tên được định nghĩa trong stickytooltip.js

Chỉnh sửa các tham số:

Mở file stickytooltip.js bạn sẽ thấy các tham số ngay ở các dòng đầu tiên

1 tooltipoffsets: [20, -30], / /Vị trí xuất hiện của tooltips so với chỏ chuột
2 fadeinspeed: 200, // Thời gian hiệu ứng (milliseconds)
3 rightclickstick: true// Giữ tooltip không bị ẩn đi khi click phải chuột (hoặc ấn phím 's')
4 stickybordercolors: ["black""darkred"], // Màu viền của tooltip theo trạng thái (giữ - không giữ)
5 stickynotice1: ["Press \"s\"""or right click""to sticky this box"],   // Tùy biến thông điệp của tooltip
6 stickynotice2: "Click outside this box to hide it"//Tùy biến thông điệp của tooltip

Kéo xuống dưới cùng bạn sẽ thấy

1 infotooltip.init("*[data-tooltip]""mystickytooltip")

dòng in đậm chính là id của thẻ DIV mà ta đã đề cập ở trên.

Để có thể xem chi tiết hơn , bạn có thể vào trang chủ Dynamic Drive Website.

This entry was posted in jQuery and tagged , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.