Cấp bậc tác giả:

HTML

jQuery Sticky Tooltip: Cuộn chuột qua Tooltip hiển thị hình ảnh tương ứng

Được viết bởi QuangIT ngày 22/07/2013 lúc 04:24 PM
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.
  • 0
  • 2814
Tải tệp tin: Click ở đây

jQuery Sticky Tooltip: Cuộn chuột qua Tooltip hiển thị hình ảnh tương ứng


stickytooltip.jpg

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.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML