Crear Tooltips con jQuery y TinyTips

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.

Tooltip jQuery #1 Tooltip Personalizado

Ejemplo:

zp8497586rq

También te puede interesar

3 Comments

  1. Angel
    feb 24, 2010 @ 04:18:42

    pues si que está bien, lo acabo de implementar en uno de mis proyectos y está bien fácil.

  2. alfonso
    feb 27, 2010 @ 14:42:10

    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.

  3. diego
    oct 18, 2011 @ 18:55:25

    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)