jquery: ẩn thuộc tính tiêu đề nhưng không xóa nó

Question

Tôi đã thấy rằng hầu hết mọi người sẽ làm điều đó với giải pháp này khi di chuột qua, chúng tôi sẽ lấy giá trị trong thuộc tính TITLE, sau đó, loại bỏ giá trị của nó. Trong khi di chuột ra, chúng tôi sẽ đưa nó trở lại.

$(this).attr('title',''); 

hoặc

$(this).removeAttr('title'); 

Tôi muốn biết là nó có thể chỉ ẩn các tooltip xuất hiện hơn loại bỏ các thuộc tính tiêu đề?

cảm ơn!

Answer 1

Không, bạn không thể, vì trình duyệt sẽ quyết định việc cần làm với thuộc tính tiêu đề. Tuy nhiên, bạn có thể lưu nó với nút để tham khảo sau này (và có thể khôi phục lại tiêu đề):

$(this).data("title", $(this).attr("title")).removeAttr("title"); 

Answer 2

Bạn có thể lưu giữ tiêu đề ở nơi nào đó trong khi chuột trên phần tử. Tuy nhiên, bạn không cần phải lưu trữ nó trong chính DOM; bạn có thể giữ nó trong một biến thể JS:

(function(){ 
    var ttext; 
    $(yourtargetselectorhere).hover(function(){ 
    ttext = $(this).attr('title'); 
    $(this).removeAttr('title'); 
    }, 
    function(){ 
    $(this).attr('title', ttext); 
    }); 
}()); 

Answer 3

Sợ bạn không thể. Phương pháp preventDefault() dường như không hoạt động cho điều này, điều này thật không may vì nó sẽ là lý tưởng.

Nếu bạn thực sự cần phải giữ lại danh hiệu thuộc tính bạn có thể làm một cái gì đó như thế này:

$(document).ready(function(){ 
     $("a").hover(function(){ 

     // Get the current title 
     var title = $(this).attr("title"); 

     // Store it in a temporary attribute 
     $(this).attr("tmp_title", title); 

     // Set the title to nothing so we don't see the tooltips 
     $(this).attr("title",""); 
     }, 

     function() { // Fired when we leave the element 

     // Retrieve the title from the temporary attribute 
     var title = $(this).attr("tmp_title"); 

     // Return the title to what it was 
     $(this).attr("title", title); 
     }); 
}); 

Nó khá phức tạp mặc dù. Trừ khi có một lý do cụ thể mà bạn cần phải giữ lại các thuộc tính tiêu đề, tôi sẽ loại bỏ chúng.

Answer 4

cảm ơn vì giải pháp của bạn. Tôi đã có cùng một vấn đề trong một dự án. Vấn đề là một tiêu đề xấu xí đã xuất hiện khi tôi di chuyển hình ảnh và tôi cần tiêu đề trong cửa sổ bật lên vì trong thuộc tính tiêu đề, tôi đặt liên kết mua cho sản phẩm. nhưng như tôi đã nói, một tiêu đề dài bao gồm cả thẻ cũng xuất hiện trên di chuột. Vì vậy, tôi chỉ cần thêm một chức năng .click vào cuối giải pháp của bạn, tôi không biết nếu nó có thể giải quyết điều này một cách ngữ nghĩa hơn, vì tôi không phải là một chuyên gia jquery. kịch bản hoàn chỉnh được dán bên dưới, liên quan :)

$(".collection-box a").hover(function(){ 

    // Get the current title 
    var title = $(this).attr("title"); 

    // Store it in a temporary attribute 
    $(this).attr("tmp_title", title); 

    // Set the title to nothing so we don't see the tooltips 
    $(this).attr("title",""); 
    }, 

    function() { // Fired when we leave the element 

    // Retrieve the title from the temporary attribute 
    var title = $(this).attr("tmp_title"); 

    // Return the title to what it was 
    $(this).attr("title", title); 
    }); 


    //Restore the title on click 
    $(".collection-box a").click(function(){ 

    // Retrieve the title from the temporary attribute 
    var title = $(this).attr("tmp_title"); 

    // Return the title to what it was 
    $(this).attr("title", title); 
    }); 

Answer 5

Đây là một giải pháp tốt, đặt tên cho một thuộc tính mới nói 'fancytitle' ở vị trí của 'tiêu đề' thông thường như thế này

<a href='#' customtitle='visit google' id='demo'> Visit Google Search </a> 

Và chọn giá trị của thuộc tính với jquery trên mouseenter/hover như thế này

$('a#demo').attr('fancytitle') 

Answer 6

Công trình này hoạt động.

$(document).ready(function(){ 
 
     $("a") 
 
     \t .mouseenter(function() { \t 
 
     \t \t var title = $(this).attr("title"); 
 
     \t \t $(this).attr("tmp_title", title); 
 
     \t \t $(this).attr("title",""); 
 
     \t }) 
 
     \t .mouseleave(function() { 
 
     \t \t var title = $(this).attr("tmp_title"); 
 
     \t \t $(this).attr("title", title); 
 
     \t }) 
 
     \t .click(function() { \t 
 
     \t \t var title = $(this).attr("tmp_title"); 
 
     \t \t $(this).attr("title", title); 
 
     \t }); 
 
     }); 
 
     });