jquery: ocultar el atributo de título pero no eliminarlo

Question

He visto que la mayoría de las personas lo harán con esta solución que al pasar el mouse, tomaremos el valor en el atributo TITLE y luego eliminaremos su valor. Mientras está en el mouse, lo volveremos a poner.

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

o

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

que quiero saber es posible simplemente ocultar la información sobre herramientas de aparecer de eliminar el atributo de título?

gracias!

Answer 1

No, no puede, ya que el navegador decidirá qué hacer con el atributo de título. Puede, sin embargo, guardarlo con el nodo para su posterior consulta (y posiblemente restaurar el título):

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

Answer 2

Puede almacenar el título en otro lugar, mientras que el ratón está sobre el elemento. Sin embargo, no tienes que guardarlo en el DOM; puede mantenerlo en un JS var:

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

Answer 3

Miedo a que no se pueda. El método preventDefault() no parece funcionar para esto, lo cual es desafortunado porque sería ideal.

Si realmente necesita para retener el título atributo que podría hacer algo como esto:

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

es bastante complicado sin embargo. A menos que haya una razón específica por la que necesite conservar los atributos del título, simplemente los eliminaría.

Answer 4

gracias por su solución. Tuve el mismo problema en un proyecto. El problema era que aparecía un título feo y largo cuando movía la imagen y necesitaba el título en emergente porque en el atributo de título, coloco un enlace de compra a un producto. pero, como dije, un título largo que incluye una etiqueta también aparece al pasar el mouse sobre él. así que acabo de agregar una función .click al final de su solución, no sé si es posible resolver esto de una manera más semántica, ya que no soy un experto en jquery. la secuencia de comandos completa se pega a continuación, respecto :)

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

Aquí es una buena solución, por nombrar un nuevo atributo decir 'fancytitle' en lugar del 'título' habitual como esto

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

y recoger valor del atributo con jquery en mouseenter/hover como este

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

Answer 6

Esto funciona.

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