jquery: hide title attribute but not remove it

Question

Hi,

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 mouse 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!

Answer 1

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");

Answer 2

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

Answer 3

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.