Sử dụng thư viện tooltip của jquery

Tooltip được tích hợp sẵn trong thư viện jquery. Để tạo tooltip cho thành phần html chỉ bằng vài dòng lệnh, là bạn đã cung cấp thêm thông tin cho chủ đề.

Trước tiên muốn sử dụng, bạn cần chèn 1 số script & css sau trong thẻ <head:

• 1. Thư viện jquery (Lên trang chủ jquery để tải về hoặc sử dụng trực tiếp đường link của host ajax.google).
• 2. jquery.dimensions.js.
• 3. jquery.tooltip.js
• 4. jquery.tooltip.css

Chuẩn bị thẻ html để gắn đối tượng tooltip.

<div id="yahoo">
<a title="Yahoo doo - plaintext" href="http://yahoo.com">Link to yahoo</a>
<a title="Yahoo doo2 - <button>button, html</button>" href="http://yahoo.com">Link to yahoo1</a>
</div>

Dữ liệu cho tooltip được lấy trực tiếp từ thuộc tính title của thẻ html. Ký tự '-' ngăn cách bởi tiêu đề & nội dung cho tooltip.

Thiết lập tooltip sử dụng jquery:
Cú pháp:

$(selector).tooltip(json_tooltip_configuration);

<script>
window.onload=function(){
$('#yahoo a').tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    showBody: " - ", 	//tách tiêu đề & nội dung cho tooltip
    fade: 250 
});
}
</script>

Chú ý: cần đặt trong sự kiện onload của window, để đảm bảo tất cả các thành phần trong document đã được khởi tạo hoàn toàn.

Xem demo:

Link to yahoo Link to yahoo1

Để custom tooltip thay vì sử dụng mặc định, vui lòng xem chi tiết tại đây.