tinyTips es un plugin para jQuery muy ligero el cual nos permite agregar Tooltips a nuestras páginas Web muy fácilmente.
Este tutorial nos muestra como implementar esta funcionalidad en nuestra página Web.
Paso 1 : Incluir los Scripts y CSS
Crearemos un archivo html donde incluiremos los JavaScripts y CSS (el Framework jQuery lo podemos llamar desde Google).
Luego inicializaremos los tooltips
En el código vemos 3 inicializaciones:
- La primera es para todos los enlaces con clase tTip, colocaran el atributo title como Tooltip.
- La segunda crea tooltips personalizados con el código html que se puede apreciar.
- La tercera colocara tooltips a imágenes con clase tTip.
Paso 2 : Generando el código HTML
Ahora crearemos los elementos anteriormente inicializados para generar los tooltips.
pues si que está bien, lo acabo de implementar en uno de mis proyectos y está bien fácil.
Usar puntualmente en una página, sin pasarse creando enlaces de este tipo, salvo que no te importe el rendimiento. Me explico. El plugin -como muchos otros- funciona creando un div sobre la marcha e inyectándolo en el DOM de la página, on line, al suceder el evento Hover; lógicamente, cuando nos movemos fuera, el plugin se encarga de ‘borrar’ del DOM el div creado. ¿Y…? Pues que las operaciones de inserción y borrado de elementos del DOM son de las más lentas. ¿Qué ocurre cuando en una página hemos puesto muchos y nos movemos con el ratón por ella hasta encontrar el enlace que queremos? Pues que se van creando/borrando múltiples divs en el DOM, consumiento el tiempo de proceso necesario, pues esto es JavaScript, señores.
A mi me pasó con otra extensión similar -esta añadía todos los divs al cargar la página- y me retrasaba enormemente la carga de la página, en algunos navegadores más que en otros. Me tenía loco la demora hasta que probé a desactivar el plugin y vuelta a la normalidad.
Buenas te hago una consulta: Si yo quiero utilizar varias cosas en jquery puedo utilizar solo una vez el framework (las cosas que quiero utilizar requieren distintas versiones) ya que si llamo el archivo que uds me proponen (el jquery 1.4 que se llama desde google) no me funcionan los tinytips.. y estoy seguro de haberlos instalado bien, de hecho probe mas de una vez. Me suena que es un tema de incompatibilidad por tener mas de un archivo jquery con distintas versiones entre si. Particularmente tengo un slide, que utiliza versión 1.3 y realmente no me funcionan los tinytips… que podria hacer? (son en la misma página)
Comments are closed.