Trước tiên bạn chèn thư viện tooltip của jquery, trong thẻ <head>:
Gắn tooltip vào đối tượng:
Thiết lập nơi chứa nội dung cho các tooltip.
Chú ý:
Kéo xuống dưới cùng bạn sẽ thấy:
dòng in đậm chính là id của thẻ DIV mà ta đã đề cập ở trên.
Xem chi tiết, Bạn có thể vào trang chủ Dynamic Drive Website.
tooltip1- 1) thư viện jquery (Các bạn download trên trang chủ của jquery :)).
- 2) stickytooltip.js
- 3) stickytooltip.css
<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" />
Gắn tooltip vào đối tượng:
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky1">tooltip1</a></p>
<p><a href="http://en.wikipedia.org/wiki/Thailand" data-tooltip="sticky2">tooltip2</a></p>
Thiết lập nơi chứa nội dung cho các tooltip.
<div id="mystickytooltip" class="stickytooltip"> <div id="sticky1" class="atip" style="width:200px">tooltip1.</div> <div id="sticky2" class="atip" style="width:200px">tooltip2.</div> </div>
Chú ý:
- Không sử dụng lệnh javascript để tạo nội dung cho tooltip: document.write("content");
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.
Xem chi tiết, Bạn có thể vào trang chủ Dynamic Drive Website.
tooltip2
tooltip1.
tooltip2.
0 nhận xét:
Đăng nhận xét