Eventos del Mouse en Colores de Atributos

[HerbalHispano]

Hola,

 

Os comento. En la tienda hemos puesto una combinacion de sabores, que esta referenciada por colores.

 

Es decir, el de fresa de color rojo, chocolate marron... etc. Pero ademas de esto, me gustaria, que cuando un cliente pasa el raton por encima del color, aparezca un texto inmediato, mas o menos bonito, con el nombre del sabor. 

 

Algo similar a esto:

 

http://www.desarrolloweb.com/articulos/evento-raton-jquery.html 

 

Aqui se puede ver el ejemplo en accion:

 

http://www.desarrolloweb.com/articulos/ejemplos/jquery/eventos/tip-simple.html

 

En lugar de que salga abajo, arriba, pero vamos, es un detalle menor. La idea basicamente es esa, que al pasar el raton, aparezca el texto. 

 

¿Alguien sabe si existe o modulo o hay alguna forma de hacer esto? Supongo que editando el product.tpl, pero no me situo ni se muy bien como hacerlo. 

 

Gracias!

[ventura]

Por ejemplo para la plantilla default, en el archivo

themes\tu_tema\product.tpl

en esta parte añadimos el codigo en color rojo

 

<li{if $group.default == $id_attribute} class="selected"{/if}>

<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if}>

{if $img_color_exists}

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />

{/if}

</a>

 <span class="tooltiptext">{$colors.$id_attribute.name|escape:'html':'UTF-8'}</span>

</li>

 

 

Por ultimo en el archivo

themes\tu_tema\css\product.css

añadimos este codigo

#attributes .attribute_list #color_to_pick_list li {
    position: relative;
}
#attributes .attribute_list #color_to_pick_list li:hover .tooltiptext {
    display: block;
}
#attributes .attribute_list #color_to_pick_list li  .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    ;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
#attributes .attribute_list #color_to_pick_list li .tooltiptext {
    background-color: #555;
    bottom: 125%;
    color: #fff;
    display: none;
    left: 50%;
    ;
    padding: 5px 0;
    text-align: center;
    transition: opacity 1s ease 0s;
    width: 100px;
    z-index: 1;
    position: absolute;
}

El resultado final sera el de la imagen adjunta