Creating balloon tool tips for your categogy thumbnails and integrating functions in the
Emporium Plus Tool Kit

1) Go to http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip and download
the free js, css, and gif files

2) Edit the bubble-tooltip.css file and change the images directory to graphics.  You 
will be putting the gif files in the existing mm5/graphics/ directory so this needs to
be changed.

3) FTP to your mm5 directory.  If you don't already have these, create js and css 
directories.  FTP the bubble-tooltip.js to the mm5/js/ directory.  FTP the 
bubble-tooltip.css to the mm5/css/ directory.  FTP the 3 gif files to the mm5/graphics
directory.

4) Go to admin > store > pages > ctgy and edit the Category page template.  Between the 
head tags near the top of this template, put the following two lines:

<link rel="stylesheet" href="css/bubble-tooltip.css" media="screen">
<script type="text/javascript" src="js/bubble-tooltip.js"></script>

In this same page template, on the line immediately following <mvt:item name="body">
put the following lines.

<div id="bubble_tooltip">
    <div class="bubble_top"><span></span></div>
    <div class="bubble_middle"><span id="bubble_tooltip_content">Content
is coming here as you probably can see.</span></div>
    <div class="bubble_bottom"></div>
</div> 

5) Click the Items link at the top of the page.  Scroll to the end and assign 
the toolkit to the items for the ctgy page.

6) Click the Category Product List Layout link at the top of the page.  Scroll 
down to where you see the thumbnail displayed.  The tool kit is used to strip
apostrophe and shorten the description to a number of characters that look ok
in the balloon.  Here is example code for the thumbnail.

<mvt:if expr="NOT ISNULL l.settings:product:thumbnail">

 <mvt:if expr="NOT ISNULL l.settings:product:descrip">
  <mvt:item name="toolkit" param="nohtml|new_desc|l.all_settings:product:descrip" />
  <mvt:item name="toolkit" param="newsubstring|new_descrip|new_desc,1,200" />
  <mvt:item name="toolkit" param="no_apostrophe|new_descrip2|new_descrip" />
  <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;&Store_Code=&mvta:store:code;" onmouseover="showToolTip(event,'&mvte:global:new_descrip2;...');return false" onmouseout="hideToolTip()">
  <img src="&mvte:product:thumbnail;" border=0></a>
 <mvt:else>
  <a href="&mvt:global:sessionurl;Screen=PROD&Product_Code=&mvta:product:code;&Category_Code=&mvta:category:code;&Store_Code=&mvta:store:code;">
  <img src="&mvte:product:thumbnail;" border=0></a> 
 </mvt:if>

<mvt:else>
 &nbsp;
</mvt:if>


The above code checks to see if there is a thumbnail image for the product. If 
there is, it then runs code to display the thumbnail and tool tip.  If no 
thumbnail, it displays a space.  Then it checks if there is a description.  If
there is, it runs tool kit code to create the tool tip without html and apostrophe 
characters.  It also shortens the description to 200 characters.  If there is 
no description, it simply displays the thumbnail.  The tool kit is available at 
http://www.emporiumplus.com/go/wcw/PROD/1AAM5/1AA00223