jquery hover pass variable to callback function

Question

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

});

Matrym · Accepted Answer · 2010-06-09 18:56:48Z

6

$(".icon a").hover(function() {
  $this = $(this);
  $.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", $.data(this, 'title');

});

The trick is:

$.data(this, 'title');

When you use data, you're effectively storing the variable on that dom element for the express purpose you've just described. You could also solve the problem by declaring the $this variable above your initial hover function, expanding the scope to cover both.

answered Jun 9, 2010 at 18:56

Matrym

17.2k35 gold badges101 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brian Barthold Over a year ago

that is what I have been trying to figure out how to declare it above this? any thoughts?

Mike Over a year ago

Exactly what I was looking for. This works great for doing simple tooltips. Append the tooltip markup to <body> in the first function, store the DOM object in a variable, store that variable in the $.data object, access it in the second function to fade it out.

gabriev82 · Accepted Answer · 2010-06-09 19:04:51Z

1

Put "hoverText" as global variable.

var 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).find("em").animate({opacity: "hide", top: "-45"}, "fast");     
  $(this).attr("title", hoverText);

});

answered Jun 9, 2010 at 19:04

gabriev82

1221 bronze badge

2 Comments

Brian Barthold Over a year ago

this works but i want to stay away from global variables any thoughts?

Adam Fowler Over a year ago

Thats a flipping terrible solution... When Assigning hovers that variable is definitely not going to stay the same.

Collectives™ on Stack Overflow

jquery hover pass variable to callback function

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related