jQuery Sticky Tooltip
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 jQuery, stickytooltip.js, stickytooltip.css. Sau đó thêm vào trong thẻ <head> của trang web:
<script type="text/javascript" src="js/jquery.js"> <script type="text/javascript" src="js/stickytooltip.js"> <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):
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">Thailand</a></p>
Tạo nội dung tooltip:
<div id="mystickytooltip" class="stickytooltip"> <div id="sticky1" class="atip" style="width:200px"><img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />Thailand boasts some of the most popular and luxurious resorts in Asia.</div> </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
tooltipoffsets: [20, -30], / /Vị trí xuất hiện của tooltips so với chỏ chuột fadeinspeed: 200, // Thời gian hiệu ứng (milliseconds) rightclickstick: true, // Giữ tooltip không bị ẩn đi khi click phải chuột (hoặc ấn phím 's') stickybordercolors: ["black", "darkred"], // Màu viền của tooltip theo trạng thái (giữ - không giữ) stickynotice1: ["Press \"s\"", "or right click", "to sticky this box"], // Tùy biến thông điệp của tooltip 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
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.
