jquery: hide title attribute but not remove it

I have seen that most people will do it with this solution that on mouse over, we will grab the value in the TITLE attribute, then, remove its value. While on m开发者_Go百科ouse out, we'll put it back on.

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

or

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

I want to know is it possible just hide the tooltip from appearing than removing the title attribute?

thanks!

No you can't, as the browser will decide what to do with the title attribute. You can, however, save it with the node for later reference (and possibly restoring the title):

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

This works.

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

You can store the title somewhere else while the mouse is over the element. You don't have to store it in the DOM itself, though; you could keep it in a JS var:

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

thanks for your solution. I had same problem in a project. The issue was a long ugly title was appearing when I hover the image and I needed the title in popup because in title attribute, I place a buy link to a product. but as I said, a long title which includes tag was appearing on hover too. so I just added a .click function to the end of your solution, I don't know if it's possible to solve this in a more semantic way, since i'm not a jquery expert. the complete script is pasted below, regards :)

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

Afraid you can't. The preventDefault() method doesn't seem to work for this, which is unfortunate because it would be ideal.

If you really need to retain the title attribute you could do something like this:

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

It's pretty convoluted though. Unless there's a specific reason you need to retain the title attributes, I would just remove them.

Here is a good solution, name a new attribute say 'fancytitle' in place of the usual 'title' like this

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

And pick attribute's value with jquery on mouseenter/hover like this

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