JS and qtip noob question

[ArnMan]

I am okay with PHP, html, css, and mysql.
When it comes to js and qtips, i am just not able to get the hang of it.

I am running a php site with mysql, html, css.
Most of the information comes from the database.
I have images on there that I would like to have a qTips info screen popup on.
the pic and pic description are in the database
I have downloaded the qtips and put the js in mysite.com/tips folder and the css in the mysite.com/css folder.

Lets say for example I have a img

HTML Code

<img src="../images/goodpic.jpg">

and that shows a image on the page.

How do I add qtips to that, after reading the database to get the proper info?

also in some places I have a php function that when called performs a database query, and echo's a image back to the php page.
example
in my index.php

PHP Code

<div class="indexpageyouareherepic">
OUT;
locpic();
print <<<OUT
</div>

and here is the function in my globalfunction.php to look for the goodpic.jpg and echo it back into main page

PHP Code

function locpic()
{
global $ir, $db;
 
$lp=$db->query("SELECT * FROM cities WHERE cityid ={$ir['location']}");
$lp1 = mysql_fetch_array( $lp );
			$lpi = "<img src='../images/{$lp1['locpic']}'>";	
	echo $lpi;
 
}

How do I implement qitps into what i have? I want to add a description of the picture in a tip when i mouseover.
Remember I am noob and am clueless

[Craig]

Well first you'll need to add the description to the image element in some way, perhaps the alt tag would be appropriate. Then use something similar to the following:

JS Code

$('img[alt]').qtip({
	content: {
		attr: 'alt'
	}
});