ToolTip Form Field - Desplegar simples ToolTips en campos de formularios

Si necesitas implementar Tooltips simples ( solo texto sin imágenes y efectos ) para formularios de tus páginas, esta es una simple clase escrita en Javascript que te permitirá hacerlo en muy pocos pasos y fácilmente.

A continuación puedes ver un simple manual de como instalar y configurar el tooltip para ponerlo en funcionamiento dentro de tu página web.

Indice - Contenido.

1. Descripción general.
2. Instalar el script en la página web.
   1. Importar los archivos en la página ( Paso 1 )
   2. Definir el texto del Tooltip ( Paso 2 )
   3. Configurar e iniciar el script ( Paso 3 )
3. Otras configuraciones
   1. Modificar texto del botón de inglés a español.
   2. Imágenes del tooltip - Para cambiar color de fondo.
   3. Cambiar ruta de imágenes
   4. Modificar otras variables y configuraciones

 

 

1 - Descripción general.

Con este sencillo y gratuito script podrás desplegar y mostrar Tips informativos en campos de formulario, para que los usuarios de tu sitio puedan visualizar información extra cuando deban introducir datos en cualquier tipo de formulario que necesites crear para tu web, ya sea un formulario de contacto, para enviar comentarios, de email, de compras de productos etc ..

El script despliega el tooltip cuando el campo de formulario toma el foco.

2 - Instalar el script en la página web.

El archivo de descarga contiene lo siguiente:

• Carpeta CSS: Directorio con archivos de hojas de estilo necesarios para el ejemplo. ( contiene un sólo fichero llamado form-field-tooltip.css )
• Carpeta images: Es una carpeta que contiene dos imágenes en formato GIF necesarias para crear tooltip.
• Carpeta JS: Contiene dos archivos javascript, form-field-tooltip.js y rounded-corners.js.

La instalación y configuración es muy fácil y rápida, solo deberás seguir los siguientes pasos que se muestran a continuación.

2.1 - Importar los archivos en la página ( Paso 1)

En la sección Head se deberán importar los dos archivos Javascript y un archivo CSS mencionados anteriormente.

<link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css" /> <script type="text/javascript" src="js/rounded-corners.js"></script> <script type="text/javascript" src="js/form-field-tooltip.js"></script>

2.2 - Definir el texto a mostrar ( Paso 2)

Luego, para cada campo de formulario que desees desplegar el toolTip, deberás definir, en el parámetro tooltiptext, el texto que desees, por ejemplo:

2.3 - Configurar e iniciar el script ( Paso 3 )

Como último paso, dentro de la sección Body de tu página, escribir el siguiente código, que lo que hace es configurar el color de fondo, definir el valor de redondeo para las esquinas del tooltip, y en que posición se desplegará el mismo ( a la derecha o abajo del campo de formulario ), por ejemplo:

<script type="text/javascript"> var tooltipObj = new DHTMLgoodies_formTooltip(); tooltipObj.setTooltipPosition('right'); tooltipObj.setPageBgColor('#EEEEEE'); tooltipObj.setTooltipCornerSize(15); tooltipObj.initFormFieldTooltip(); </script>

En cambio si lo deseas posicionar por debajo, deberás pasar como valor a la función setToolTipPosition lo siguiente:

toolTipObj.setTooltipPosition('below')

3 - Otras configuraciones.

A continuación se describen algunas otras configuraciones que puedes editar para personalizar el script a tus necesidades.

3.1 - Modificar texto del botón de inglés a español.

El Tooltip contiene dos enlaces o botones. Uno con el texto "No mostrar este mensaje nuevamente" y otro para "Cerrarlo".

Dicho texto se encuentra en inglés. Por ello si quieres cambiar el texto a idioma Español, puedes abrir el archivo form-field-tooltip.js, y buscar la siguiente línea de código para editarlo:

Y para el botón de cerrar la siguiente línea:

 

3.2 - Imágenes del tooltip - Para cambiar color de fondo.

El Tooltip utiliza dos archivos GIFS de imagen que se utilizan para las flechas del mismo.

Dichas imágenes deberás editarlas, si cambias de color de fondo del ToolTip o cambias el valor de redondeo para las esquinas.

Nota: Los archivos de imagen se definen en el archivo javascript, son las variables: arrowImageFile y arrowImageFileRight

3.3 - Cambiar ruta de imágenes.

Si deseas cambiar la ruta de imágenes, deberás modificar la línea siguiente del archivo form-field-tooltip.js, que es la propiedad que define la carpeta base de las imágenes.

3.4 - Otras variables y configuraciones

Otras propiedades que puedes utilizar para configurarlo son :

• tooltipWidth : El valor para el ancho en pixeles. Por defecto utiliza 200 pixeles
• disableTooltip : Para habilitar o deshabilitarlo. Por ejemplo si pasas el valor True se deshabilitará :tooltipObj.disableTooltip("true");

Para ver todos los métodos y propiedades de la clase, el ejemplo dispone de un simple manual con la documentación que describe cada una de ellas y los valores posibles que puedes pasar a las propiedades y funciones. ( en la carpeta Docs ).

Compatibilidad: Este script ha sido probado en los siguientes navegadores web :

• Internet explorer 7 y 8.
• Mozilla FireFox 2 y 3 o superior.
• Opera.
• Google Chrome.