Jquery function pass parameters

I am trying to remove a title attribute for a link on hover and then add it back on mouse out. I would like to pass var hoverText to the hover out…

Here is the code I have. Any ideas?




    $(".icon a").hover(function() {
      $this = $(this);
      var hoverText = $.data(this, 'title', $this.attr('title'));                              
      $(this).find("em").animate({opacity: "show", top: "-35"}, "slow");
      $(this).find("em").text(hoverText);        

      $this.removeAttr('title');       
      
        
    }, function(hoverText) {              

      $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast");      
      $(this).attr("title", hoverText); 
      
    });    


If you set the title attribute in HTML, you won’t have to do it in javascript.

If not, where is the data for that attribute coming from?

This works but it is a global. does anyone know how to make it work without a global?


    hoverText = '';
    $(".icon a").hover(
    function() {
      $this = $(this);                         
      hoverText = $.data(this, 'title', $this.attr('title'));          
      $(this).find("em").animate({opacity: "show", top: "-35"}, "slow");
      $(this).find("em").text(hoverText);        
      $(this).removeAttr('title');    
    }, function() {        
       $(this).attr("title", hoverText); 
         $(this).find("em").animate({opacity: "hide", top: "-45"}, "fast");          
    });    


Could you not just assign the hovertext to a hovertext property of the this keyword?


this.hovertext = ...