jquery: hide title attribute but not remove it

Question

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

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

Answer 3

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 4

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