Script para mostrar información de ayuda en nuestros formularios

A la hora de maquetar un formulario muchas veces nos podemos encontrar con que ciertos campos son complejos y pueden dar lugar a confusión, por lo que es necesario aclarar de qué tratan. Esto puede llegar a ser bastante molesto en el diseño, más si es necesario colocar varias aclaraciones.

Tooltip for forms nos da la posibilidad de agregar una aclaración a cualquier elemento del formulario que sólo será visible cuando se esté usando y desaparecerá una vez completado.

Cuando ya hayamos enlazado nuestro sitio a la librería Javascript, tan sólo debemos agregar el atributo tooltipText a cualquier input y ya será suficiente para que aparezca un pequeño globo con la información que deseas al seleccionarlo.

Por ejemplo para agregarlo a un texto debes colocar:

<input type="text" id="ejemplo" name="ejemplo" tooltipText="Este es el texto que aparecerá como ayuda">

Para inicializar y configurar la herramienta debes utilizar el siguiente código:

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip(); //lo crea
tooltipObj.setTooltipPosition('right'); // Indica en que posición se mostrar el globo, puede ser right(derecha) o below(debajo)
tooltipObj.setPageBgColor('#EEE'); //Debes indicar el color de fondo de tu sitio
tooltipObj.setCloseMessage('Cerrar'); // Indica el texto que aparecerá para que el usuario pueda cerrar el globo
tooltipObj.setDisableTooltipMessage('No mostrar más');
//Mensaje que aparecerá para que el usuario pueda tener la opción de que no aparezcan más textos de ayuda
tooltipObj.initFormFieldTooltip(); //inicializa
</script>

Y ya será suficiente para tener todo funcionando. Con estos pocos pasos podrás obtener una funcionalidad que de lo contrario sería bastante complicada de lograr.

Descarga Tooltips for Forms desde el sitio de DhtmlGoodies (haz clic aquí).