Question

I have a few images with css -> $(".toolTip").

<img  width="150" height="200" src="<?php echo $avatarPath; ?> " class="toolTip" alt="<?php echo $control_panel_id ?>"/>

In my code, I want to refer to the image as a tag, and not to the class. I want to apply jquery methods, to the specific image that I hover over (taking into account that all those images have the same class name..)

Is there a way to do this … $(“.toolTip”). and then getSelector() method, so that I will get the specific element the mouse hovered over?!?

UPDATE:
but when I try to put mouseover, it doesnt work..it positions the div near the first picture…

 $('body').append('<div style="position:absolute; z-index:9999; background-color:#FF0000; width:150px; height:400px;" id="tooltip_outer"><div style="position:absolute; z-index:9999;" id="tooltip_inner"></div></div>');
 var $toolTip_inner=$("#tooltip_inner"); 
 var $toolTip_outer=$("#tooltip_outer");
// var $toolTip;



 if(!$(".toolTip"))
 {

     return;
 }


 $(".toolTip").hover(function(){

      $toolTip=$(this);
     if( $(this).attr("alt") )
     {  

        $tooltipText=$(this).attr("alt"); 

        $(this).attr("alt",'');

     }
     else
     {

       $bug[0]="There is no title a$toolTip_outerribute<br/>";
     }

      var t_width=$(this).outerWidth();
     var t_height=$(this).outerHeight();

    //Move css
     $toolTip_outer.css({
     'top':t_height-60,
     'left':t_width-140

    });

        $toolTip_inner.html("<p>The control panel id is: "+$tooltipText+" </p>");        
        $toolTip_outer.show();

    },  
  function(){
      //hide tooltip
    $toolTip_outer.hide();  
    //fix text
    $toolTip_inner.html(''); 

     if($toolTip_inner)
     {   // restore title text
        $(this).attr('alt',$tooltipText); 
     }

  })

The location takes into account the first image only..

Answer 1

$(".toolTip").hover(function(){
    // On mouseover
    // Here 'this' refers to the DOM Element that is hovered over
    // $(this) is a jQuery object containing it
}, function(){
    // Here 'this' refers to the DOM Element that was hovered over
    // $(this) is a jQuery object containing it
});

If you use $(this) more than once in a function either use chaining, or store $(this) in a variable like var $this = $(this); and then use $this to speed up your script.

Update

First of all although this doesn’t solve your problem, but you should know that !$(".toolTip") is always false: http://jsfiddle.net/Jm7Kn/ You probably want !$(".toolTip").length which will only be false if there were no matches to the selector .toolTip.

Your problem probably occurs around here:

$toolTip_outer.css({
    'top':t_height-60,
    'left':t_width-140
});

Where you position the toolTip outer relative to it’s offset parent rather than relative to the tooltip you’re currently hovering over. You may have meant to use $ev_x to position close to the mouse cursor, or you may have wanted to use jQuery’s position function like $toolTip.position().top and $toolTip.position().left to get the position of the image that is being hovered over and put the tooltip near those co-ordinates. I’m not sure of your exact intentions though.