Hướng dẫn Sử dụng jQuery plugin Gips để tạo tooltip đơn giản

[PVS]

Sử dụng jQuery plugin Gips để tạo tooltip đơn giản

Nếu bạn đã am hiểu và có thể viết ứng dụng với jQuery thì việc viết ứng dụng tooltip không phải là khó nhưng trên internet các plugin tooltip viết với jQuery là khá nhiều bạn hoàn toàn có thể sử dụng miễn phí các plugin đó. Bài viết này sẽ giới thiệu một plugin viết rất nhỏ gọn đó là plugin Gips.

Ưu điểm

• Kích thước file nhỏ gọn
• Dễ sử dụng và tùy chỉnh chức năng
• Dễ dàng sửa CSS
• Code viết ngắn gọn, xúc tích và bạn có thể sửa đổi dễ dàng
• Tương thích tốt trên hầu hết các trình duyệt

Sử dụng
HTML code

<link href="css/gips.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/gips.js" type="text/javascript"></script>
<div id="demo">
    <input type="text" value="Purple Tooltip Here." id="purple" />
    <input type="text" value="Green Tooltip Here." id="green" />
    <input type="text" value="Yellow Tooltip Here." id="yellow" />
    <input type="text" value="Red Tooltip Here." id="red" />
</div>

Bạn cần đảm bảo liên kết tới các file js và CSS đồng thời đảm bảo các đường dẫn đúng trong CSS tới file PIE.htc để sử dụng CSS3 cho IE.

JavaScript code

$(document).ready(function () {
  $('input#purple').gips({ 'theme': 'purple', autoHide: true, delay: 100, pause: 1000, text: 'This is purple tooltip, auto hide after pausess time elapses.' });
  $('input#green').gips({ 'theme': 'green', placement: 'left' });
  $('input#yellow').gips({ 'theme': 'yellow', autoHide: true, placement: 'right' });
  $('input#red').gips({ 'theme': 'red', placement: 'bottom' });
});

Các tùy chọn tham số gips
text: Chứa nội dung tooltip, mặc định nếu không có tham số này thì đoạn text sẽ được lấy mặc định được viết trong gips.js với đoạn văn bản là "Lorem ipsum dolor sit amet...". Nếu bạn muốn một đoạn text cho tooltip được lấy tự động từ PHP thì bạn có thể xuất HTML ngay gần phần tử sử dụng tooltip rồi viết một đoạn code jQuery nhỏ để lấy đoạn nội dung đó gán giá trị cho biến text hoặc bạn có thể sửa trong file gips.js

• delay: xác định thời gian dừng trước khi tooltip xuất hiện, mặc định là 500mili giây
• autoHide: với giá trị true sẽ cho phép tooltip tự động ẩn khi di chuyển chuột ra ngoài
• pause: xác định thời gian hiển thị khi tooltip ở chế độ autoHide, mặc định là 5s
• animationSpeed: tốc độ hoạt hình animation, mặc định là 500mili giây
• placement: xác định vị trí của tooltip với các giá trị top, right, left, bottom, mặc định là top
• theme: tên theme css được định kiểu trong file CSS, bạn có thể sửa lại trong file CSS
• imagePath: đường dẫn tới hình ảnh cho nút đóng tooltip, mặc định là "images/close.png"

Xem demo và tải ứng dụng từ địa chỉ egrappler.com.

Chúc các bạn thành công.

Nguồn: sothichweb.com​