Thay đổi thuộc tính tiêu đề bằng cách sử dụng jQuery trong khi di chuột qua phần tử

Question

Tôi có nút div có thuộc tính tiêu đề mà chúng tôi đã sử dụng làm văn bản cho các mẹo công cụ bằng cách sử dụng jQueryUI. Tôi muốn thay đổi chú giải công cụ của nút bằng cách nhấp vào nó. Tuy nhiên, khi nút được nhấp và chức năng gọi lại được kích hoạt, con chuột vượt quá div và tiêu đề là null.

Tôi làm cách nào để khắc phục hành vi này? Dường như jQueryUI Tooltip widget loại bỏ tiêu đề trên di chuột và đặt nó trở lại chuột ra ngoài.

$(document).tooltip(); 
$(".btn").click(function(){ 
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank 
    if ($(this).attr("title")=="T1"){ 
     $(this).attr("title","T2") 
    }else{ 
     $(this).attr("title","T1") 
    } 
}); 

Live: http://jsfiddle.net/lordloh/ckTjA/

Nếu không có widget jQueryUI Tooltip tại chỗ, mọi thứ dường như làm việc tốt: http://jsfiddle.net/lordloh/ckTjA/1/

Hơn nữa, tôi có widget tooltip áp dụng trên $(document). Vì vậy, tôi không thể sử dụng $(this).tooltip("option","content") vì chú giải công cụ không được áp dụng trên $(this) một cách rõ ràng. Điều này dẫn đến lỗi Javascript trên bảng điều khiển.

2013-02-18: Hiện tại, tôi đang chạy $(document).tooltip("destroy");, thay đổi thuộc tính tiêu đề và $(document).tooltip();. Không phải là một giải pháp thanh lịch :-(Tôi đang tìm kiếm cái gì đó không phải là một hack

Answer 1

Các widget loại bỏ các văn bản từ title thuộc tính để ngăn chặn các tooltip trình duyệt có nguồn gốc từ xuất hiện khi nó loại bỏ các văn bản, nó sẽ lưu nó trong dữ liệu gắn liền với yếu tố

Bạn có thể làm tương tự sử dụng dòng mã này:..

$("#my-element").data("ui-tooltip-title", "My new tooltip message"); 

Bây giờ, nếu người dùng di chuyển con chuột của họ ra khỏi phần tử, và sau đó di chuột trở lại vào nó, nó sẽ hiển thị văn bản mới.

Để hiển thị văn bản mới ngay lập tức, bạn cần cập nhật phần tử lớp phủ chú giải công cụ trực tiếp, rất dễ tìm. Bạn chỉ cần thực hiện việc này sau khi bạn đã cập nhật văn bản:

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title")); 

_{Đã kiểm tra trên giao diện người dùng jQuery 1.10.0.}

Answer 2

Khi sử dụng widget tooltip, bạn có thể cập nhật nội dung thông qua API riêng của mình:.

$(this).tooltip('option', 'content', "New Content Goes Here"); 

Answer 3

Hãy thử điều này:

 


            
 

    
             
  
$('document').ready(function() { $('document').tooltip(); $(".btn").click(function(){ alert($(this).attr("title")); if ($(this).attr("title")=="T1"){ $(this).attr("title","T2"); }else{ $(this).attr("title","T1"); } }); });
            
 

$ ('tài liệu') phải ở trong đơn hay ngoặc kép (' hay ") và nó hoạt động tốt cho tôi whitout $ ('tài liệu' ) .tooltip();