¿Cómo utilizar "Prototype 2"?

ambigus · #1 (**permalink**) 01/07/2011, 08:41

Hola he estado intentado hacer funcionar esta excelente herramienta:

http://www.nickstakenburg.com/projects/prototip2/

Sin embargo, aún no logro instalar un efecto de "Tooltip". ¿Podrían ayudarme?

Les dejo mi intento fallido:

http://extremegamex1.gofreeserve.com...rueba_2.1.html

Espero una pronta respuesta,
Gracias de antemano ;)

alexg88 · #2 (**permalink**) 01/07/2011, 09:22

Como viene explicado en la página tienes que llamar a la función Tip:

Código Javascript:

Ver originaldocument.observe("dom:loaded", function(){  
new Tip('imagen', new Element('div').update('my text'), 
{  title: 'This tooltip has a title',  
 hook: { tip: 'topLeft', mouse: true }, 
 offset: { x: 14, y: 14 }});  
});

Si tienes preguntas sobre lo que hace, no dudes en preguntar.

ambigus · #3 (**permalink**) 01/07/2011, 13:30

Hola alexg88, muchas gracias por tu respuesta. Sin embargo, me gustaría que me ayudaras a efectuar ese "Llamado" que tú dices, no entiendo a qué te refieres, sin embargo, no se si lo que dicen en la página oficial de Prototip 2 servirá de algo:

How to Use:

Creating a tooltip is as easy as:

Cita:

new Tip(element, 'content');

To create a more advanced tooltip you can add an optional thirth parameter with options:

Cita:

new Tip(element, 'content', {
title: 'This tooltip has a title',
style: 'protoblue',
stem: 'topLeft',
hook: { tip: 'topLeft', mouse: true },
offset: { x: 14, y: 14 }
});

Espero haber sido algo descriptivo, es que dice: "New tip", y lo copio a mi HTML, pero no se en qué código envolverlo, Javasript?, Ajax?, JQuery?, CSS?.

Espero una pronta respuesta. Gracias de antemano :)

alexg88 · #4 (**permalink**) 01/07/2011, 13:43

Es un script en lenguaje javascript, lo tienes que poner entre las etiquetas <script> en el <head>

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
document.observe("dom:loaded", function(){  
new Tip('imagen', new Element('div').update('my text'), 
{  title: 'This tooltip has a title',  
 hook: { tip: 'topLeft', mouse: true }, 
 offset: { x: 14, y: 14 }});  
})
</script>
</head>
<body>
  <img src="simple.gif" id="imagen">
  </body>
</html>

Tienes que tener un elemento (una imagen, un link, un div) con id = 'imagen'.

ambigus · #5 (**permalink**) 01/07/2011, 21:28

Hola alexg88 gracias por tu pronta y muy efectiva respuesta. Ahora te linkeo mis avances:

http://extremegamex1.gofreeserve.com...rueba_2.2.html

Sin embargo, yo quiero dos cosas:

1. Que el efecto sea exactamente (si es posible como el ejemplo "Simple" de la página original de Prototype 2: http://www.nickstakenburg.com/projects/prototip2/

Es uno que dice: "A simple tooltip, nothing fancy just yet"

2. Modificar el ancho del contenido.

Estuve observando y al parecer tiene algo que ver con el archivo "prototip.css"

Te comparto el contenido de este:

http://extremegamex1.gofreeserve.com...s/prototip.css

Y es que , quisiera aclara que quiero tener un ancho defenido en cada tooltip. Por ejemplo, te comparto la idea completa, es que quiero colocarle un Tooltip a cada una de las imagenes, y cada tooltip con su descripción respectiva, pero pues con un ancho determinado, personalisado a cada una de las imagenes.

Gracias de antemano. Espero una pronta respuesta.

alexg88 · #6 (**permalink**) 02/07/2011, 09:10

Te paso un ejemplo que he hecho con lo que pides:

http://jsfiddle.net/alexg88/yf47d/

Si te fijas, para definir el ancho que quieres utilizas el atributo width. Para que el tooltip no tenga borde (border:1), ni sea redondeado en los bordes (radius:1).
El estilo se le define con el atributo style (en este caso simple).

ambigus · #7 (**permalink**) 02/07/2011, 11:40

Hola te agradesco por tu ayuda, mira ya he logrado modificarlo:

http://extremegamex1.gofreeserve.com...rysis_1.3.html

Sin embargo, no logro que se coloque el efecto, a la segunda parte "Requisitos Recomendados", nose qué estoy haciendo mal, puesto que ambos DIVs tienen el mismo atributo de "Windows" por ejemplo, debería aparecer en los dos lados, no?

Espero una pronta respuesta. ;)

ambigus · #8 (**permalink**) 02/07/2011, 13:40

Hola, sigo con mi autoavance :D. Ahora te comparto cómo lo solucioné y la solución:

Solución:
http://extremegamex1.gofreeserve.com...rysis_1.4.html

Resulta que lo que hice fue crear otros "New elements" que se asociaran con otros DIVs, manteniendo el mismo estilo en cada uno, me explico:

El icono de Sistema Operativo de la Izquierda está asociado con el DIV: "Windows" y lo que hice fue crear otro (además de ese) llamado: "Windows2". Al igual que con el .CSS de cada uno, simplemente dubplicando cada uno y asociandolo con otro nombre, en este caso un número 2.

Igualmente, quien quiera analizar esta secuencia, puede visualizar el "Código fuente de la página":

http://extremegamex1.gofreeserve.com...rysis_1.4.html

Gracias a alexg88:)