Tooltips problem, making this javascript work with my smarty foreach loop, help pelase!

Question

I 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 (not a lot of things)

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

Answer 1

The code you've shown is a loop, but the contents of the loop (the markup that will get repeated) is assigning id values to elements. For instance:

<div id="mystickytooltip" class="stickytooltip">

If you're outputting more than one of those (and I assume you are, as it's in the loop), that's invalid HTML and will not work correctly -- id values must be unique within a document.

I don't know that's the problem with the tooltips, but it needs to be fixed, and perhaps it will clear up the problem (as the tooltips may well be associating themselves with elements via id). You have lots of elements being output with hardcoded ids in that HTML, they'll all need seeing to.

One way you could make the ids unique would be to append the loop index to them. My Smarty-fu is nonexistant, but something like:

<div id="mystickytooltip{$smarty.foreach.cart.index}" class="stickytooltip">

...since your loop is named cart.