jquery: скрыть атрибут title, но не удалить

Question

Я видел, что большинство людей будет делать это с помощью этого решения, которое на мышь, мы возьмем значение в атрибуте TITLE, а затем удалим его значение. Пока мышь, мы вернем его обратно.

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

или

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

Я хочу знать, что можно просто скрыть подсказку от появляясь, чем удаление атрибута заголовка?

спасибо!

Answer 1

Нет, вы не можете, так как браузер решит, что делать с атрибутом title. Вы можете, однако, сохранить его с узлом для последующего использования (и, возможно, восстанавливающего названия):

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

Answer 2

Вы можете сохранить название где-то еще в то время как мышь находится над элементом. Однако вам не нужно хранить его в самой DOM; вы можете сохранить его в JS var:

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

Answer 3

Бояться, что вы не можете. Метод preventDefault(), похоже, не работает для этого, что является неудачным, потому что это было бы идеально.

Если вам действительно нужно, чтобы сохранить название атрибута вы могли бы сделать что-то вроде этого:

$(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); 
     }); 
}); 

Это довольно запутанная, хотя. Если нет определенной причины, вам нужно сохранить атрибуты заголовка, я бы просто удалил их.

Answer 4

Спасибо за ваше решение. У меня была такая же проблема в проекте. Проблема заключалась в появлении длинного уродливого названия, когда я наводил изображение, и мне нужен заголовок в всплывающем окне, потому что в атрибуте title я добавляю ссылку для покупки на продукт. но, как я уже сказал, длинный заголовок, который включает в себя тег, появлялся и при наведении. поэтому я просто добавил функцию .click в конец вашего решения, я не знаю, можно ли это решить более семантически, так как я не эксперт jquery. полный сценарий наклеена ниже, привет :)

$(".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

Вот хорошее решение, назвать новый атрибут сказать «fancytitle» вместо обычного «название», как этот

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

и выбрать значение атрибута с помощью jquery на mouseenter/наведите курсор следующим образом

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

Answer 6

Это работает.

$(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 }); 
 
     }); 
 
     });