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

$(this).attr("title", tooltipptext); tooltiptext is empty, but it shouldn't be — Alexander_F
– Alexander_F, Commented Aug 20, 2010 at 13:16
also, the .hover function takes two functions as parameters, the first being onmouseover, and the second being onmouseout. you dont have to have the separate mouseout, just put the function as the second parameter to the .hover call — John Boker
– John Boker, Commented Aug 20, 2010 at 13:16
becouse if i hover the object again, that contains no text, also i tryed to alert this variable. — Alexander_F
– Alexander_F, Commented Aug 20, 2010 at 13:17

Nick Craver · Accepted Answer · 2010-08-20 13:16:41Z

.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 :)

Collectives™ on Stack Overflow

Javascript Problem with Variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related