jQuery : Set tool-tips on Image mouse over

/* If you want to use this for multiple images change only id names */


<img id="ps_img_btn" src='<?php echo "Path of Image";?>' />
     
 <div id="ps_img_bnt_tooltip" style="display: none; position: absolute; left: 80px; top: 91px;"><p>Slim Fit. Suited for slim or athletic builds who want to show off silhouette of body.</p></div>

<script>      
            Event.observe('ps_img_btn','mouseover',function(event){        
                       $('ps_img_bnt_tooltip').style.display='block';
                       $('ps_img_bnt_tooltip').style.position='absolute';
                      /* If you want to change of Height and Width then Change Here X and Y */
                       x = 80;
                       y = 75;
                       $('ps_img_bnt_tooltip').style.left= x+"px";
                       $('ps_img_bnt_tooltip').style.top = y + "px";    })
                        Event.observe('ps_img_btn','mouseout',function(event){
$('ps_img_bnt_tooltip').style.display='none';    })
        </script>




/* Put This code in your CSS */


#ps_img_bnt_tooltip p{ background: url("../images/options/arrow-img.png") no-repeat scroll left top transparent;
    color: #000000;
    font-size: 9px;
    height: 58px;
    padding: 0 0 0 22px;
    width: 128px;}

#ps_img_bnt_tooltip1 p{ background: url("../images/options/arrow-img.png") no-repeat scroll left top transparent;
    color: #000000;
    font-size: 9px;
    height: 58px;
    padding: 0 0 0 22px;
    width: 128px;}