Javascript Problem with Variables

Question

I have created a function to showing a title text in a separate div, its wotks perfectly, but a have problems with "title" attribute, so i wonna delete it after tooltipp wenn be displayed. And on mouse ou show it agaiin, but the variable tooltipptext is empty... same one an idea?

var tooltipptext;    
$(".infoimg").hover(function(event) {
        tooltipptext = $(this).attr("title");

        showToolTip(event, tooltipptext);
        $(this).attr("title", "");

        return false;       
    });

    $(".infoimg").mouseout(function()   {
        $("#bubble_tooltip").hide();
        $(this).attr("title", tooltipptext);
        return false;
    });

Answer 1

.hover(), when passed a single functions runs it on both mouseenter and mouseleave, clering the variable because this:

tooltipptext = $(this).attr("title");

runs again after $(this).attr("title", ""); ran already. Instead pass both functions to .hover(), like this:

var tooltipptext;    
$(".infoimg").hover(function() {
    tooltipptext = $(this).attr("title");
    showToolTip(event, tooltipptext);
    $(this).attr("title", "");
}, function()  {
    $("#bubble_tooltip").hide();
    $(this).attr("title", tooltipptext);
});

---

Or since you're never seeing the title attribute on hover, store it once like this:

$(".infoimg").each(function() {
  var title = $(this).attr("title");
  $(this).data('title', title).attr('title','');
}).hover(function() {      
  showToolTip(event, $.data(this, 'title'));
}, function()  {
  $("#bubble_tooltip").hide();
});

This has the added benefit of working on any number of images :)