Greetings

I'm using Zen-Cart v1.3.9h.

I'm trying to use Poshy Tooltip (http://vadikom.com/demos/poshytip/), a jquery plugin on my product info page.
The problem is, it works perfectly outside zen-cart but I can't seem to get it work inside my zen-cart installation.

Here is the code that I use outside zen-cart.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Poshy Tip jQuery Plugin Demo Page</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

	<!-- Tooltip classes -->
	<link rel="stylesheet" href="tip-skyblue/tip-skyblue.css" type="text/css" />
	<!-- jQuery and the Poshy Tip plugin files -->
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.poshytip.js"></script>

	<!-- Setup examples on this page -->
	<script type="text/javascript">
		//<![CDATA[
		$(function(){
			$('#test').poshytip({
				className: 'tip-skyblue',
				bgImageFrameSize: 9,
				offsetX: 0,
				offsetY: 20
			});
		});
		//]]>
	</script>
</head>

<body>
<!-- #demo-tip-skyblue -->
<p><a id="test" title="Hey, there! This is a tooltip." href="#">.tip-skyblue</a></p>
</body>
</html>
So when adding javascript I used the proper method (I think) that I found on the wikipage.
http://www.zen-cart.com/wiki/index.p...s_-_Javascript

My shop/includes/modules/pages/product_info, now lists both:
  • jscript_jquery.poshytip.js
  • jscript_jquery-1.4.2.min.js


I then added the script code to the main block inside jscript_main.php. Here is the contents of that file:

Code:
<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: jscript_main.php 5444 2006-12-29 06:45:56Z drbyte $
//
?>
<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#test').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
});
//]]>
</script>

And I put this in the /shop/includes/templates/cherry_zen/templates/tpl_product_info_display.php:

Code:
<p><a id="test" title="Hey, there! This is a tooltip.">.tip-skyblue</a></p>
And finally I just added this inside tpl_product_info_display:
Code:
<link rel="stylesheet" href="tip-skyblue/tip-skyblue.css" type="text/css" />


So basically, exactly the same as in the files outside zen-cart.

My source of index.php?main_page=product_info&cPath=66_16045&products_id=6&language=en contains the proper links, I can see them in my browser.

Code:
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_jquery.poshytip.js"></script>
<script type="text/javascript" src="includes/modules/pages/product_info/jscript_textarea_counter.js"></script>
<script language="javascript" type="text/javascript"><!--
function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
function popupWindowPrice(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=600,height=400,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#test').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});
});
//]]>
</script>

And my firebug reports:
Code:
$("#test").poshytip is not a function
I also tried linking to the page directly in tpl_product_info_display.php, but I found out that it wasn't recommended.

The only thing that I think is off place is the link, normally you put this in the head tag, how do I do that? I don't think it's relevant tbh, because I also have another css and that works perfectly fine...
I really don't know what's wrong? Does anybody have a clue? I hope I provided you with enough information, if not please say so and I will do so.