« Volver
in JQuery read.

[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 usuariostrong>legend> 3: <table> 4: <tr> 5: <td>Nombre:td> 6: <td><inputtype="text"class="tip"/><ahref="#"class="tip"title="Ingrese su nombre"><imgsrc="images/info.png"/>a>td> 7: tr> 8: <tr> 9: <td>Apellido:td> 10: <td><inputtype="text"/><ahref="#"class="tip"title="Ingrese su apellido"><imgsrc="images/info.png"/>a>td> 11: tr> 12: <tr> 13: <td>Email:td> 14: <td><inputtype="text"/><ahref="#"class="tip"title="Ingrese su dirección de email"><imgsrc="images/info.png"/>a>td> 15: tr> 16: <tr> 17: <tdvalign="top">Seleccione avatar:td> 18: <td> 19: <imgsrc="images/avatar1.gif"class="tip"title="Avatar 1"style="margin-right:20px;"/> 20: <imgclass="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: <linkrel="Stylesheet"href="css/jquery.ui.all.css"/> 2: <scriptsrc="js/jquery-1.6.2.js">script> 3: 4: 5: 6: comments powered by Disqus