Cách sử dụng Sticky Tooltip
Sticky tooltip là một tooltip mà khi bạn ghê chuột lên một element cho phép bạn hiển thị tooltip đã được định nghĩa tương ứng với element mà chuột đang ghê lên. Bạn có thể nhấn phím ‘s’ hoặc nhấn chuột phải lên element để cho phép người dùng tương tác với nội dung bên trong của tooltip, ...
Sticky tooltip là một tooltip mà khi bạn ghê chuột lên một element cho phép bạn hiển thị tooltip đã được định nghĩa tương ứng với element mà chuột đang ghê lên. Bạn có thể nhấn phím ‘s’ hoặc nhấn chuột phải lên element để cho phép người dùng tương tác với nội dung bên trong của tooltip, và nhấn ra bên ngoài tooltip để đóng tooltip đó lại khi người dùng không còn tương tác với nội dung tooltip đó nữa.
Các bước hướng dẫn sử dụng sticky tooltip
- Bước 1: tạo thư mục DemoStrickyTooltip trên máy tính bạn
- Bước 2: vào http://www.dynamicdrive.com/dynamicindex5/stickytooltip.js, nhấn Ctrl + S để lưu tập tin vào thư mục DemoStrickyTooltip vừa tạo ở bước 1
- Bước 3: vào http://www.dynamicdrive.com/dynamicindex5/stickytooltip.css, nhấn Ctrl + S để lưu tập tin vào thư mục DemoStrickyTooltip vừa tạo ở bước 1
- Bước 4: tạo tập tin Demo.html trong thư mục DemoStrickyTooltip vừa tạo ở bước 1
Từ bước 1 đến bước 4, thư mục DemoStrickyTooltip của bạn sẽ có cấu trúc như sau
/DemoStrickyTooltip/
stickytooltip.js
stickytooltip.css
Demo.html
- Bước 5: Mở tập tin Demo.html bằng notepad++, khai báo 2 tập tin stickytooltip.js và stickytooltip.css trong thẻ <head>, code như sau:
<html>
<title>www.gockinhnghiem.com - Demo Sticky Tooltip</titl
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js"></script>
<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
</head>
<body>
</body>
</html>
- Bước 6: Vào thẻ <body> của tập tin Demo.html, định nghĩa các link, image và các tooltip
<body>
<p>Ghê chuột vào link hoặc image bên dưới để xem Sticky Tooltip</p>
<p><a href="www.gockinhnghiem.com" data-tooltip="sticky1">Góc Kinh Nghiệm</a></p>
<p><a href="http://gockinhnghiem.com/2010/11/19/ham-vlookup-do-tim-1-gia-tri-nao-do-trong-1-cot-trong-excel/" data-tooltip="sticky2">Hàm vlookup() trong excel</a></p>
<p><image src="http://gockinhnghiem.com/wp-content/uploads/jqGrid-demo-data.png" awidth="200px" height="100px" data-tooltip="sticky3"/></p>
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
<img src="http://gockinhnghiem.com/wp-content/uploads/Image2.gif" /><br />
Chào mừng bạn đến với Góc Kinh Nghiệm!
</div>
<div id="sticky2" >
<img src="http://gockinhnghiem.com/wp-content/uploads/Autocomplete-data-local.png" /><br />
Hàm <b><a href="http://gockinhnghiem.com/2010/11/19/ham-vlookup-do-tim-1-gia-tri-nao-do-trong-1-cot-trong-excel/">vlookup()</a></b> trong excel
</div>
<div id="sticky3">
<img src="http://gockinhnghiem.com/wp-content/uploads/jqGrid-demo-data.png" />
</div>
</div>
<div class="stickystatus"></div>
</div>
</body>
Chú thich:
Tất cả các tooltip nên định nghĩa bên trong một thẻ <DIV> mà thôi, tương ứng với mỗi tooltip thì tạo mỗi thẻ <DIV> con bên trong, mỗi thẻ con có một id duy nhất, cấu trúc như sau:
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
Nội dung tooltip 1
</div>
<div id="sticky2" class="atip">
Nội dung tooltip2
</div>
<div id="sticky3">
Nội dung tooltip3
</div>
</div>
<div class="stickystatus"></div>
</div>
Trong demo này Góc Kinh Nghiệm sử dụng 3 tooltip, vì vậy định nghĩa 3 thẻ <DIV> có id lần lượt là sticky1, sticky2, sticky3 (được gọi là tooltipid). Và 3 thẻ <DIV> này nằm trong thẻ <DIV> cha có class là “stickytooltip”
Với 3 tooltip được định nghĩa trong thẻ <DIV>, gắn các tooltip vào các element mà chúng ta muốn hiển thị (ở đây tiêu biểu là các link và image) bằng cách thêm attribute “data-tooltip=tooltipid” vào nó. Ví dụ:
<a href="www.gockinhnghiem.com" data-tooltip="sticky1">Góc Kinh Nghiệm</a>
Thẻ <DIV> cha có id là “mystickytooltip”, và được định sử dụng trong tập tin stickytooltip.js như bên dưới, vì vậy bạn phải đặt có giống tên nhau, nếu không giống, tooltip của bạn sẽ không chạy được đâu nhé:
infotooltip.init("*[data-tooltip]", "mystickytooltip")
- Bước 7: giờ thì chúng ta có code hoàn chỉnh cho phần Sticky tooltip như bên dưới:
<html>
<title>www.gockinhnghiem.com - Demo Sticky Tooltip</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="stickytooltip.js"></script>
<link rel="stylesheet" type="text/css" href="stickytooltip.css" />
</head>
<body>
<p>Ghê chuột vào link hoặc image bên dưới để xem Sticky Tooltip</p>
<p><a href="www.gockinhnghiem.com" data-tooltip="sticky1">Góc Kinh Nghiệm</a></p>
<p><a href="http://gockinhnghiem.com/2010/11/19/ham-vlookup-do-tim-1-gia-tri-nao-do-trong-1-cot-trong-excel/" data-tooltip="sticky2">Hàm vlookup() trong excel</a></p>
<p><image src="http://gockinhnghiem.com/wp-content/uploads/jqGrid-demo-data.png" awidth="200px" height="100px" data-tooltip="sticky3"/></p>
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">
<div id="sticky1">
<img src="http://gockinhnghiem.com/wp-content/uploads/Image2.gif" /><br />
Chào mừng bạn đến với Góc Kinh Nghiệm!
</div>
<div id="sticky2" >
<img src="http://gockinhnghiem.com/wp-content/uploads/Autocomplete-data-local.png" /><br />
Hàm <b><a href="http://gockinhnghiem.com/2010/11/19/ham-vlookup-do-tim-1-gia-tri-nao-do-trong-1-cot-trong-excel/">vlookup()</a></b>trong excel
</div>
<div id="sticky3">
<img src="http://gockinhnghiem.com/wp-content/uploads/jqGrid-demo-data.png" />
</div>
</div>
<div class="stickystatus"></div>
</div>
</body>
</html>
Mở tập tin Demo.html ở trình duyệt, bạn sẽ thấy Sticky tooltip hiện lên khi bạn ghê chuột vào link hoặc image
Góc Kinh Nghiệm chúc các bạn thành công! 
