Jquery Unique Tooltip

[Macko888]

Hey Peeps!

Im not too familiar with jQuery,

Ive been wanting to make a tooltip for a "search result grid",

each trigger should have a unique comment in the tooltip.

so say for instance i have a php call like so:

<?php
  $query = mysql_query("SELECT * FROM `Cars` ORDER BY `Make` ASC ");
  //cars might have things like: make, year, mileage and description

  while($row = mysql_fetch_assoc($query)){
   //loop to draw out table
  }
?>

inside the row loop:

<tr>
 <td><?php echo $row['make'];?></td>
 <td><?php echo $row['model'];?></td>
 <td>
   <a href="#" class="quali">description</a>
   <div class="qual">
      <?php echo $row['description'];?>
   </div>
 </td>
</tr>

in the script section ive tried using the following:

$(document).ready(function(){
  $(".quali").hover(function(){
    $(".qual").css({
               "visibility" : "visible"
                  });
    },function(){
  $(".qual").css({
    	"visibility" : "hidden"			  
  	  });	
  });
			
});

where .quali is the class of my <a href="#"></a> trigger and .qual is the class of my tooltip div.

it works, (suprisingly), but all the tooltips show up together.

I know i need a unique identifier, im just not too sure how to achieve this,

Any help will be greatly appreciated.

Thanks!

[fobos]

maybe something like

function showtip(id) {
    $(id).css "visibility" : "visible";    
}
function hidetip(id) {
    $(id).css "visibility" : "hidden";    
}

then add this to your href:

<a href='#' onmouseover='showtip('".row['id']."')' onmouseout='hidetip('".row['id']."')'>description</a>
<div id='".row['id']."'><?php echo $row['description'];?>   </div>

i think onmouseover='' and onmouseout='' needs to have javascript: in it. like onmouseout='javascript:hidetip()'. i hope this helps