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

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!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: