AspMaker es una herramienta de creación de mantenimiento de back-office para aplicaciones web. Dispone de YUI integrable, pero en este caso hemos querido agregar el ToolTip de Flowplayer para mejorar el aspecto.

Para los fans de YUI este tooltip que se integra en AspMaker quizás no sea lo ideal, pero para los que somos sobre todo fans de jQuery y los plugins disponibles para el, la realidad es que se hace mucho más simple el desarrollo que con cualquier otra herramienta.

Los pasos que vamos a dar son básicamente tres, cada uno en un bloque muy claro.

Modificar la hoja de estilos predefinida por AspMaker

Editaremos la hoja de estilos predefinida por AspMaker, para esto vamos a nuestro proyecto, seleccionamos HTML y la pestaña Styles, pulsamos el botón Edit Styles y nos vamos a la parte inferior que es la zona habilitada para el CSS del usuario.

Insertamos este código en la zona indicada

div.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:300px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px; 
    z-index:999;
    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
} 

Ya tenemos completado el primer paso, personalizando nuestra hoja de estilos.

Modificar el template que incorpora AspMaker

Para ello nos vamos a la carpeta donde esté instalada la aplicación y buscamos la carpeta /template, dentro estará el archivo aspv8.zip que es el la plantilla principal que genera las páginas de mantenimiento.

Recomiendo extraer todos los archivos a una carpeta suelta y allí modificar el archivo template.asp
Para ello vamos a la línea 67 que contiene un link a hoja de estilos y agregamos

<!--// Linea 67 de template.asp //-->
<link rel="stylesheet" type="text/css" href="<!--##=sProjCssFile##-->" />
<!--// Agregar estas lineas //-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>

Con esto hemos indicado a la plantilla que debe cargar tras la hoja de estilos y otros elementos de la cabecera, la librería de jQuery 1.4.2 y la versión mínima de jQuery Tools que debe contener al menos los añadidos de Tooltip.
Puedes descargar aqui directamente este script con este link (es la versión completa de jQuery Tools UI).
Ya tenemos lo principal configurado, es importante que verifiques donde subes el script y la ruta indicada arriba, habitualmente no funciona por equivocar la ruta.

Agregar scripts en el lado del cliente de AspMaker

Vamos ahora con lo que debemos repetir en todos los formularios donde queramos disponer del Tooltip.
Seleccionamos la tabla y a la derecha seleccionamos AspMaker - Server Events/Client Script
En la lista de sitios vamos a Table Specific y dentro seleccionaremos primero el Add/Copy Script, luego repetiremos los mismos pasos en Edit Page.

   </script>
<div class="tooltip"> </div>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
// select all desired input fields and attach tooltips to them
$("#YOURFORM :input").tooltip({
    // place tooltip on the right edge
    position: "center right",
    // a little tweaking of the position
    offset: [-2, 10],
    // use the built-in fadeIn/fadeOut effect
    effect: "fade",
    // custom opacity setting
    opacity: 0.7,
    // use this single tooltip element
    tip: '.tooltip'
});
});

Simplemente copiar y pegar el script que indico arriba. Es importante mantener exactamente así las líneas ya que necesitamos integrar una sección DIV y por eso cerramos y abrimos el JavaScript. El cierre es para resolver la apertura que nos da automáticamente el propio AspMaker, abrimos de nuevo para nuestro código y dejamos abierto el script para que sea de nuevo AspMaker quien cierre con su template.

Modificar donde pone YOURFORM por el nombre del formulario, AspMaker identifica los nombres de los formularios en el DOM como el nombre de este precedido de una "f" minúscula. Por tanto si la tabla se llama MiTablaPrueba el formulario se llamará fMiTablaPrueba.
Imprescindible respetar las mayúsculas y minúsculas a la hora de usar el DOM, el caso de cambiar alguna no lo encontrará.

Ya tenemos completado lo necesario para que nos funcione el ToolTip de Flowplayer en los formularios de AspMaker. Solo una nota importante, tanto el script como la librería FlowPlayer utilizan el título del campo para el Tooltip, por lo que es imprescindible que pongamos en el Aspmaker los títulos de cada campo, y digo TITLE y no CAPTION.

Ahora los formularios serán más agradables de usar y podremos ayudar al usuario que información debe cargar en cada campo.

Este es el resultado que vamos a obtener en nuestro AspMaker