ToolTip de texto para prestashop

[tonilopez]

Saludos,

 

Necesito alguna herramienta que me permita poner tooltips en las descripciones de mis artículos. ¿Pueden recomendarme algún recurso? Gracias

 

Felices fiestas

[nadie]

¿Para los listados de productos, para la ficha del producto o para el bloque de productos destacados?

 

Tienes distintas librerías como estas: http://calebjacob.com/tooltipster/#demos que las puedes incluir dentro de tu tienda.

 

Claro que tambien puedes usar la libreria cluetip que lleva Prestashop, si me dices donde aplicarlo te monto un ejemplo.

[tonilopez]

Es para usar en los textos contenidos en los tab de la página de producto. Voy a intentarlo con los recursos que me recomiendas. Muchas gracias.

[Feliz Garcia]

Me interesa este tema.
 

¿A que te refieres con los tab? ¿El tab de la descripcion del producto en la ficha del producto? (Interesa, interesa, comenta, pon un ejemplo de lo que quieres)

[tonilopez]

Si, en la página de productos, tengo tres pestañas:

 

Detalles (donde hay una introducción del producto y un poco de explicación)

Características (diametro, longitud, etc)

Comentarios.

 

La cuestión, es tener la posibilidad de poner tooltips en el contendido de la pestaña de Detalles cuando necesite dar mas información sobre algún término, abreviatura, etc.

 

saludos

Edited December 25, 2013 by tonilopez (see edit history)

[tonilopez]

Disculpad, no tengo nada claro que archivo es el que tengo que abrir para incluir los jQuery. 

[nadie]

Si, en la página de productos, tengo tres pestañas:

 

Detalles (donde hay una introducción del producto y un poco de explicación)

Características (diametro, longitud, etc)

Comentarios.

 

La cuestión, es tener la posibilidad de poner tooltips en el contendido de la pestaña de Detalles cuando necesite dar mas información sobre algún término, abreviatura, etc.

 

saludos

 

Ok, luego te monto un ejemplo sencillo que tengo que salir ahora.

[tonilopez]

Gracias, no es urgente.

[ventura]

puedes utilizar algo basico asi

 

http://codepen.io/peiche/pen/JaftA

[nadie]

Puedes hacer uso de lo que comenta Ventura, es mas sencillo de lo que te iba a comentar por mi parte.

 

PD: Estoy en el movil.

[tonilopez]

Pues me gusta el ejemplo que puso Ventura y es sencillo de implementar. Yo estaba mirando este:

 

http://calebjacob.com/tooltipster/#demos

 

Que me ha gustado mucho, pero tengo la duda de si el archivo que debo editar para cargar los js y css es el FrontController.php.

 

Gracias por la ayuda. Saludos

[nadie]

Pues me gusta el ejemplo que puso Ventura y es sencillo de implementar.

 

Usa directamente el ejemplo de Ventura, no tienes que cargar ningun js adicional.

 

Solo meter las instrucciones css en el global.css (/themes/plantilla/css/global.css) de tu plantilla, metes esto:

a[data-tooltip] {
  position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
}
a[data-tooltip]::before {
  /*
   * using data-tooltip instead of title so we 
   * don't have the real tooltip overlapping
   */
  content: attr(data-tooltip);
  background: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px;
  border-radius: 5px;
  /* we don't want the text to wrap */
  white-space: nowrap;
  text-decoration: none;
}
a[data-tooltip]::after {
  width: 0;
  height: 0;
  border: 6px solid transparent;
  content: '';
}

a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
  display: block;
}

/** positioning **/

/* left tooltip */
a[data-tooltip][data-placement="left"]::before {
  top: -25%;
  right: 100%;
  margin-right: 10px;
}
a[data-tooltip][data-placement="left"]::after {
  border-left-color: #000;
  border-right: none;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  margin-right: 4px;
}

/* right tooltip */
a[data-tooltip][data-placement="right"]::before {
  top: -25%;
  left: 100%;
  margin-left: 10px;
}
a[data-tooltip][data-placement="right"]::after {
  border-right-color: #000;
  border-left: none;
  top: 50%;
  left: 100%;
  margin-top: -6px;
  margin-left: 4px;
}

/* top tooltip */
a[data-tooltip][data-placement="top"]::before {
  bottom: 100%;
  left: 0;
  margin-bottom: 10px;
}
a[data-tooltip][data-placement="top"]::after {
  border-top-color: #000;
  border-bottom: none;
  bottom: 100%;
  left: 10px;
  margin-bottom: 4px;
}

/* bottom tooltip */
a[data-tooltip][data-placement="bottom"]::before {
  top: 100%;
  left: 0;
  margin-top: 10px;
}
a[data-tooltip][data-placement="bottom"]::after {
  border-bottom-color: #000;
  border-top: none;
  top: 100%;
  left: 10px;
  margin-top: 4px;
}

En el editor de texto de la descripción del producto, metes por ejemplo esto (en la ventanita de html)

 

<a href="#" data-tooltip="Descubrio America en 1492" data-placement="left">Cristobal Colon</a>

-----------------------

-----------------------

-----------------------

 

Información:

 

data-placement="right" = La leyenda se vera en la derecha
data-placement="left" == La leyenda se vera en la izquierda
data-placement="top" == La leyenda se vera en la parte superior
data-placement="bottom" == La leyenda se vera en la parte inferior

[tonilopez]

Gracias, perdonad que no contestara hasta ahora, pero la comida de Navidad se hizo larga.

[nadie]

Gracias, perdonad que no contestara hasta ahora, pero la comida de Navidad se hizo larga.

 

¿Lo has colocado al final en la tienda?

 

Saludos,

 

PD: ¿Comida de Navidad? ¿Eso que es? xD

[tonilopez]

 

 

PD: ¿Comida de Navidad? ¿Eso que es? xD 

 

Pues en mi caso, algo a lo que la familia me obliga a asistir jeje.

 

Lo he puesto en la tienda y queda bastante bien. La única pega, es si el texto es muy largo, tengo que mirar si encuentro una forma fácil de añadir saltos de línea.

 

Saludos