Question: Im trying to write a function that, shows 1 of 2 possible tooltips based on the div's current class, I cant seem to get it working however.

Both classes constantly show...

Ive made a fiddle to explain my problem as the code is quite bulky...

<http://jsfiddle.net/QfrGc/>

```
$('.row').hover(function(){
    if(!$(this).hasClass('active')) {

            $(this).hover(function(){

                //Click to expand
                tip = $('.t1');
                tip.show(); 

            });

    } else {

        $(this).hover(function(){

                //Click to drag
                tip = $('.t2');
                tip.show(); 

            });

    };
});

```

Answer: 
You're attaching a second `hover` event if a class exists. This occurs once - not every time it is hovered as you expect.

Just do the check and do the right behaviour inside the first hover

```
$('.row').hover(function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).show();
});

```

Live example: <http://jsfiddle.net/QfrGc/1/>

You may have also intended to hide the tooltip when you mouse out. If so this can be extended to

```
$('.row').hover(function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).show();
},function(){
  var tipSelector = $(this).hasClass('active') ? '.t1' : '.t2';
  $(tipSelector).hide();
});

```

Live example: <http://jsfiddle.net/QfrGc/2/>
You don't need to attach a new hover event. I have modified your code:

```
$('.row').hover(function(){
    if(!$(this).hasClass('active')) {
        //Click to expand
        tip = $('.t1');
        tip.show(); 
    } else {
        //Click to drag
        tip = $('.t2');
        tip.show(); 
    };
});

```