Tooltips problem, making javascript work with my smarty foreach loop, help pelas

[Spikae]

am using an example of tooltips from http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm on www.euroworker.no/order

I have this code here to work with, but it just doesn't seem to work correctly, I've tried everything I can think of. It's not a problem with the Smarty or html, css as far as I Can see, when I view the source, the urls for the seperate images are correct, but it only displays the image of the first item in the cart.

Here's the code.

{foreach from=$cart.cartItems item="item" name="cart"}

<div class="{zebra loop="cart"}">
<div id="sgproductview">


<div id="cart2Varekode">
 <p>
 {if $product.sku}
     <span class="param">{$item.product.sku}</span>
    {else}
     <span>{img src=$item.Product.DefaultImage.paths.1 alt=$item.Product.name_lang|escape}</span>
    {/if}
 </p>
</div>


<div id="cart2Produkt">


 <p>{if $item.Product.ID}
     <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$smarty.foreach.cart.iteration}" target="_blank">{$item.Product.name_lang|truncate:20}</a>

    {else}
     <span>{$item.Product.name_lang|truncate:20}</span>
    </a>
   {/if}



</p>
 <p>
 {include file="order/itemVariations.tpl"}
   {include file="order/block/itemOptions.tpl"}

   {if $multi}
    {include file="order/selectItemAddress.tpl" item=$item}
   {/if}
            </p>
</div>
{if $item.Product.DefaultImage.paths.3}
<div id="mystickytooltip{$smarty.foreach.cart.index}" class="stickytooltip">

<div style="padding:5px;">

<div id="sticky1" class="atip" style="width:200px;">

<img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br>
{$item.Product.name_lang}

</div>

<div id="sticky2" class="atip" style="width:200px;">

<img src={$item.Product.DefaultImage.paths.3} alt="{$item.Product.name_lang|escape}"><br>
{$item.formattedPrice}

</div>

<div id="sticky3" class="atip" style="width:200px;">

<img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br>
{$item.Product.name_lang}PRODUCT 3

</div>

<div id="sticky4" class="atip" style="width:200px;">

<img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br>
{$item.Product.name_lang}

</div>

</div>


</div>
{/if}


<div id="cart2Price">
 <p class="actualPrice">

 {$item.formattedPrice}
 </p>
</div>





<div id="salg"></div>

<div id="cart2Salg">
 <p></p>
</div>



<div id="antallbox">
<p class="cartQuant">
  {textfield name="item_`$item.ID`" class="text"}        
</p>
</div>





<div id="cart2Total">
 <p>



{if $item.count == 1}
    <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span>
   {else}
    {$item.formattedDisplaySubTotal}
    <div class="subTotalCalc">
     {$item.count} x <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span>
    </div>
   {/if}
</p>
</div>



<div id="delete">

{if 'ENABLE_WISHLISTS'|config}
    <a href="{link controller=order action=moveToWishList id=$item.ID query="return=`$return`"}">{t _move_to_wishlist}</a>
   {/if}
   <a id="slett" href="{link controller=order action=delete id=$item.ID query="return=`$return`"}" title="Slett"><!--{t _remove}--></a>
  </div>

</div>

</div>


{/foreach}

And the Javascript

var stickytooltip={
    tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
    fadeinspeed: 200, //duration of fade effect in milliseconds
    rightclickstick: false, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
    stickybordercolors: ["#0a5692", "#0a5692"], //border color of tooltip depending on sticky state
    stickynotice: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
    stickynotice2: "Click outside this box to hide it", //customize tooltip status message

    //***** NO NEED TO EDIT BEYOND HERE

    isdocked: false,

    positiontooltip:function($, $tooltip, e){
        var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
        var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
        x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
        y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
        $tooltip.css({left:x, top:y})
    },

    showbox:function($, $tooltip, e){
        $tooltip.fadeIn(this.fadeinspeed)
        this.positiontooltip($, $tooltip, e)
    },

    hidebox:function($, $tooltip){
        if (!this.isdocked){
            $tooltip.stop(false, true).hide()
            $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice)
        }
    },

    docktooltip:function($, $tooltip, e){
        this.isdocked=true
        $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice)
    },


    init:function(targetselector, tipid){
        jQuery(document).ready(function($){
            var $targets=$(targetselector)
            var $tooltip=$('#'+tipid).appendTo(document.body)
            if ($targets.length==0)
                return
            var $alltips=$tooltip.find('div.atip')
            if (!stickytooltip.rightclickstick)
                stickytooltip.stickynotice[1]=''
            stickytooltip.stickynotice=stickytooltip.stickynotice.join(' ')
            stickytooltip.hidebox($, $tooltip)
            $targets.bind('mouseenter', function(e){
                $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
                stickytooltip.showbox($, $tooltip, e)
            })
            $targets.bind('mouseleave', function(e){
                stickytooltip.hidebox($, $tooltip)
            })
            $targets.bind('mousemove', function(e){
                if (!stickytooltip.isdocked){
                    stickytooltip.positiontooltip($, $tooltip, e)
                }
            })
            $tooltip.bind("mouseenter", function(){
                stickytooltip.hidebox($, $tooltip)
            })
            $tooltip.bind("click", function(e){
                e.stopPropagation()
            })
            $(this).bind("click", function(e){
                if (e.button==0){
                    stickytooltip.isdocked=false
                    stickytooltip.hidebox($, $tooltip)
                }
            })
            $(this).bind("contextmenu", function(e){
                if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
                    stickytooltip.docktooltip($, $tooltip, e)
                    return false
                }
            })
            $(this).bind('keypress', function(e){
                var keyunicode=e.charCode || e.keyCode
                if (keyunicode==115){ //if "s" key was pressed
                    stickytooltip.docktooltip($, $tooltip, e)
                }
            })
        }) //end dom ready
    }
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")

I need to add the javascript equivalent of the smarty index to "mystickytooltip" there I guess.. I don't have much experience with Javascript..

Thanks

[Spikae]

Don't worry, I just went with a really simple CSS tooltip.