Ở bài Tooltip bằng CSS chúng ta đã có thể sử dụng css tạo ra một tooltip đơn giản cho website của mình, nhưng nếu các bạn muốn một tooltip khó hơn 😀 , thực hiện được các tác vụ đa dạng hơn, như nhúng một file .xml, .html, hay cả .txt với các hiệu ứng lạ độc đáo thì bài này sẽ dành cho bạn, đương nhiên để học được bài này các bạn cần phải có kiến thức về Javascript.

Bước chuẩn bị:

1. Chúng ta cần download thư viện về để sử dụng bao gồm 2 file tooltip.css và tooltip.js.

2. Include 2 file này vào trong website của bạn, để trong thẻ <head>

<link type="text/css" rel="stylesheet" href="/(path)/tooltip.css" />
<script type="text/javascript" src="/(path)/tooltip.js"></script>

path là đường dẫn.
3. Sử dụng với một ví dụ nhỏ nhá:

<span class="tooltip" onmouseover="tooltip.pop(this, '<h3>Xin chào</h3>Chào mừng các bạn đến với Nongdanit.info')">Hover me</span>

Các bạn có thể thay đổi các sự kiện onmouseover cho onclick, onfocus…

Bước Thiết lập Tooltip Content : chúng ta có 3 cách:

Cách 1: tooltip.pop(targetElement, text [, options])

  • targetElement: có thể là chính phần tử ta thêm vào(this) hoặc chỉ định nó thông qua ID.
  • text: là một đoạn text đơn giản hay một đoạn text có định dạng HTML.
  • options: các tùy chọn trong tooltip.js

Ví dụ 1:

 <a onmouseover="tooltip.pop(this, 'Hi', {maxWidth: 300})">Xin chào</a>

Ví dụ 2:

Javascript:

<script>tooltip.pop('span1', 'Hello', {sticky:true,position:4});</script>

HTML:

<span id="span1"></span>

Cách 2: tooltip.pop(targetElement, ‘#contentElementId’ [, options])

  • ContentElementId là Id=”contentElementId” của thẻ mà chúng ta sẽ tooltip, xem ví dụ sẽ dễ hiểu hơn.

Ví dụ:

HTML:

<a class="tooltip" href="#demo2_tip" onmouseover="tooltip.pop(this, '#demo2_tip', {sticky:true})">Hover me</a>
<div style="display:none;">
  <div id="demo2_tip">
   <img src="http://nongdanit.info/wp-content/uploads/2015/07/ndit.png" style="float:right;margin-left:12px;" alt="" />
   <b>Tooltip</b><br /><br />
 Nội dung tooltip. Có thể chèn ảnh vào đoạn văn này, có thể định dạng tùy thích <strong>OK</strong>.
  </div>
</div>

Chú ý: phải nhớ đoạn hiển thị khi tooltip phải được đặt trong một block và có css là display:none

Cả hai cách 1 và 2 trên xem demo tại đây

Cách 3: tooltip.ajax(targetElement, url[, ajaxSettings][, options])

Đây chính là cái hay nhất mà mình thấy, chúng ta có thể viết một đoạn hoặc nhiều đoạn định dạng hết html và css riêng lưu lại với định dạng html, hoặc  txt, hoặc xml… sau đó sử dụng chúng để tooltip lên, hay cái nữa là có thể chỉ lấy một đoạn trong nhiều đoạn cũng được luôn ^^. Demo tại đây

A- Với file .html

Trước hết chúng ta tạo ra một trang html riêng có tên là tooltip-ajax.html có nội dung như sau:


<!DOCTYPE html>
<html>
<head><title>Tooltip Ajax</title></head>
<body>
<div id="div1">
<h3>hiển thị trang html(tooltip-ajax.html)</h3>
<p>Nội dung hiển thị của page
<a href="http://nongdanit.info" target="_blank">nongdanit.info</a></p>
</div>
<div id="div2">
<h3>hiển thị 1 đoạn trong trang html(tooltip-ajax.html#div2)</h3>
<img src="http://nongdanit.info/wp-content/uploads/2015/07/ndit.png" style="float:right;margin-left:20px; width:75px; height:75px;" alt="" />
<p>Nếu thêm "#div2" vào url của Ajax, thì tooltip này sẽ load lên nội dung của đoạn có id="div2".</p>
</div>
</body>
</html>

Tiếp theo ta sẽ sử dụng tooltip.ajax hiển thị trang tooltip-ajax.html mới tạo trên:


<p><a class="tooltip" href="src/tooltip-ajax.html" onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html');" onclick="return false;">1 hiển thị trang html(tooltip-ajax.html)</a></p>

và muốn hiển thị 1 đoạn sẽ là:


<p><a class="tooltip" href="src/tooltip-ajax.html#div2" onmouseover="tooltip.ajax(this, 'src/tooltip-ajax.html#div2');" onclick="return false;">hiển thị một đoạn trong trang(tooltip-ajax.html)</a></p>

Sau khi xong các bạn sẽ thấy thật tuyệt vời phải không nào? Nhưng đó chưa là tất cả đâu, tiếp theo còn đã hơn nữa, mình sẽ load một file (.xml) lên.

B. Với file .xml

Cách làm sẽ là có 4 tấm ảnh đại diện cho 4 album nhạc và khi hover vào sẽ hiển thị tên album, tên ca sĩ, và giá của album.

HTML:

<span id="span4">
<img src="src/tooltips-cd1.jpg" onmouseover="myAjaxSetting.context.index = 1; tooltip.ajax(this, 'src/products.xml', myAjaxSetting, {position:0});" alt="" />
<img src="src/tooltips-cd2.jpg" onmouseover="myAjaxSetting.context.index = 2; tooltip.ajax(this, 'src/products.xml', myAjaxSetting, {position:0});" alt="" />
<img src="src/tooltips-cd3.jpg" onmouseover="myAjaxSetting.context.index = 3; tooltip.ajax(this, 'src/products.xml', myAjaxSetting, {position:0});" alt="" />
<img src="src/tooltips-cd4.jpg" onmouseover="myAjaxSetting.context.index = 4; tooltip.ajax(this, 'src/products.xml', myAjaxSetting, {position:0});" alt="" />
</span>

Javascript:

<script type="text/javascript">
var myAjaxSetting = {
     context: { index: -1 },
     success: myCallback,
     responseType: "xml"
};

function myCallback(response, context) {
var x = response.documentElement.getElementsByTagName("cd")[context.index];//vị trí lấy dữ liệu trong xml, các bạn nên nhớ là giống như mảng nhá bắt đầu từ số 0
var title = x.getElementsByTagName("title")[0].childNodes[0].nodeValue;// Tên album
var artist = x.getElementsByTagName("artist")[0].childNodes[0].nodeValue;//Tên ca sĩ
var price = x.getElementsByTagName("price")[0].childNodes[0].nodeValue;// Giá
var image = "<img src='src/tooltips-cd" + context.index + ".jpg' style='float:right;margin-left:12px;width:75px;height:75px;' />";//Hình hiển thị
return "<div style='width:220px;'>" + image + "<b>" + title + "</b><br /><i>" + artist + "</i><br /><br />Price: <span class='red'>$" + price + "</span></div>";// trả ra kết quả
}
</script>

Mình giải thích một chút về sự kiện onmouseover:


onmouseover="myAjaxSetting.context.index = 1; tooltip.ajax(this, 'src/products.xml', <span style="color: #ff0000;">myAjaxSetting</span>, {position:0});"

  • myAjaxSetting.context.index = 1; đây chính là vị trí muốn lấy dữ liệu trong file .xml(mặc định đã khai báo là -1).
  • myAjaxSetting  sẽ gọi lại hàm myCallback và trong hàm này sẽ lấy dữ liệu từ .xml để hiển thị ra tooltip.

Bài hướng dẫn tooltip với Javascript của mình đến đây là hết. Bài tiếp theo mình sẽ hướng dẫn các bạn sử dụng tooltip này để tạo ra Menu với một phong cách độc ^^. Các bạn có thể dowload code ở đây.

Javascript Tooltip
Tagged on: