5 mayo 2012

Fácil Tooltip jQuery sin plugin

En esta ocasión les quiero compartir 2 tipos de tooltip que pueden usar con pocas lineas de código y sin plugins. Solo deben crear el objeto que llamará al Tooltip, en este caso hice 2 links los cuales tienen un div oculto al lado con la clase .tooltip. En el ejemplo que aparece a continuación pueden observar el efecto básico de tooltip que muestra al div oculto que se encuentra después del “<A>”. El segundo efecto es el mismo tipo de tooltip pero con seguimiento. Pueden descargar este ejemplo aquí para que lo usen donde deseen.

El Código del Efecto jQuery:

El Ejemplo a continuación:

  • Guest

    Cómo hago para utilizar el tooltip en varios enlaces de la misma página?

  • Jaime

    Excelente tooltip, fácil de usar.

  • Jaime

    Cómo hago para usar el mismo tooltip en diferentes enlaces dentro la misma página?

  • seballero

    Puedes usar una clase, en el ejemplo 1 cambiar el “#tooltip1” por “.tooltips” y usas esa clases para todos los tooltip que hagas, ya que la funcion jquery funciona relativamente al div próximo que está al lado del tooltip. En el segundo ejemplo debes cambiar “#tooltip2” por “.tooltips” y el “#tooltip2” que está dentro de la función lo cambias por “this”, ahi podrás usar tooltips en todos lados de la página. Saludos

  • Jaime

    Muchas, muchas gracias por la ayuda amigo, quedo muy bien, y realmente es genial este tooltip.

  • como lo ago soy algo nuevo y no lo comprendo bien

  • jajaj ya lo entendi pero muy buen aporte gracias

  • Oswaldo Naranjo Veloza

    Excelente, y muy fácil de implementar, le agradezco enormemente su aporte y que lo haya compartido.

  • Mauricio Moo

    Excelente aporte. Claro y sencillo de seguir. Gracias.