[jQuery] Nuevas características de jQuery UI 1.9 – Parte I: Tooltip

Posted on


Hola, bueno voy a hacer unos post para revisar algunas de las nuevas características de jQuery UI 1.9, así que este que será el primer post vamos a ver el tooltip.

Su uso es realmente sencillo y tiene varias opciones de configuración. En este post vamos a ver un ejemplo con la configuración por defecto.

El texto del tooltip será tomado de la propiedad title del elemento.

La idea es tener tooltips de ayuda para un formulario de registro, así que primero creamos el HTML del formulario:

   1:  <fieldset>
   2:      <legend><strong>Registro de usuario</strong></legend>
   3:      <table>
   4:          <tr>
   5:              <td>Nombre:</td>
   6:              <td><input type="text" class="tip" /><a href="#" class="tip" title="Ingrese su nombre"><img src="images/info.png" /></a></td>
   7:          </tr>
   8:          <tr>
   9:              <td>Apellido:</td>
  10:              <td><input type="text" /><a href="#" class="tip" title="Ingrese su apellido"><img src="images/info.png" /></a></td>
  11:          </tr>
  12:          <tr>
  13:              <td>Email:</td>
  14:              <td><input type="text" /><a href="#" class="tip" title="Ingrese su dirección de email"><img src="images/info.png" /></a></td>
  15:          </tr>
  16:          <tr>
  17:              <td valign="top">Seleccione avatar:</td>
  18:              <td>
  19:                  <img src="images/avatar1.gif" class="tip" title="Avatar 1" style="margin-right:20px;" />
  20:                  <img class="tip" title="Avatar 2" src="images/avatar2.gif" />
  21:              </td>
  22:          </tr>
  23:      </table>
  24:  </fieldset>

Luego las referencias a los archivos js necesarios:

   1:  <link rel="Stylesheet" href="css/jquery.ui.all.css" />
   2:  <script src="js/jquery-1.6.2.js"></script>
   3:  <script src="js/ui/jquery.ui.core.js"></script>
   4:  <script src="js/ui/jquery.ui.widget.js"></script>
   5:  <script src="js/ui/jquery.ui.position.js"></script>
   6:  <script src="js/ui/jquery.ui.tooltip.js"></script>

Y finalmente el código jQuery:

   1:  $(function(){
   2:      $(".tip").tooltip();
   3:  })

Como se puede observar es bastante fácil, y lo único que se debe hacer es llamar el método tooltip(), y como selector he usado la clase tip.

Como siempre les dejo el código con el ejemplo y nos vemos en el próximo post con más novedades de jQuery UI 1.9

Descarga el ejemplo!

About these ads

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s