Utilización del widget de información sobre herramienta



    Acerca del widget de información sobre herramienta

    El widget de información sobre herramienta de Spry muestra información adicional cuando el usuario pasa el puntero del ratón por encima de un elemento concreto de una página Web. El contenido adicional desaparece cuando el usuario deja de pasar el ratón por encima. También puede configurar la información sobre herramientas para que permanezca abierta durante más tiempo, de manera que los usuarios puedan interactuar con el contenido de dicha información sobre herramientas.

    Un widget de información sobre herramienta consta de los tres elementos siguientes:

    • El contenedor de la información sobre herramienta. Se trata del elemento que contiene el mensaje o el contenido que desea mostrar cuando el usuario activa la información sobre herramienta.

    • El elemento o elementos de la página que activan la información sobre herramienta.

    • El script constructor. Se trata del código JavaScript que indica a Spry que cree la funcionalidad de información sobre herramienta.

    Al insertar un widget de información sobre herramienta, Dreamweaver crea un contenedor de información sobre herramienta mediante etiquetas div y rodea el elemento “desencadenante” (el elemento de la página que activa la información sobre herramienta) con etiquetas span. Dreamweaver utiliza estas etiquetas de manera predeterminada, aunque las etiquetas de la información sobre herramienta y el elemento desencadenante pueden ser cualquiera, siempre y cuando se encuentren dentro del cuerpo de la página.

    Al utilizar el widget de información sobre herramienta, tenga presente los siguientes aspectos:

    • La información sobre herramienta que esté abierta se cerrará antes de que se abra la siguiente.

    • Las informaciones sobre herramientas persisten en tanto en cuanto los usuarios pasen el puntero del ratón por encima del área desencadenante.

    • No existe ningún límite en cuanto a los tipos de etiquetas que pueden utilizarse como desencadenantes y como contenedor de la información sobre herramienta. (No obstante, es aconsejable utilizar elementos de nivel de bloque para evitar posibles problemas de visualización en los distintos navegadores.)

    • De manera predeterminada, la información sobre herramienta aparece 20 píxeles más abajo y hacia la derecha del cursor. Puede utilizar las opciones Desplazamiento horizontal y Desplazamiento vertical del inspector de propiedades para establecer un punto de visualización personalizado.

    • Actualmente no es existe medio alguno de lograr que una información sobre herramienta esté abierta al cargar una página en un navegador.

    El widget de información sobre herramienta exige muy poco código CSS. Spry utiliza JavaScript para mostrar, ocultar y situar la información sobre herramienta. Puede conseguir cualquier otro estilo para la información sobre herramienta mediante técnicas CSS estándar, según lo requiera la página. La única regla contenida en el archivo CSS predeterminado es una solución a los problemas de Internet Explorer 6 para que la información sobre herramienta aparezca encima de los elementos de formulario u objetos de Flash.

    Para una explicación detallada sobre el funcionamiento del widget de información sobre herramienta de Spry, incluida una descripción completa del código del widget, consulte www.adobe.com/go/learn_dw_sprytooltip_es.

    Para ver un tutorial sobre el uso del widget de información sobre herramientas de Spry, consulte www.adobe.com/go/lrvid4046_dw_es.

    Inserción del widget de información sobre herramienta

     Seleccione Insertar > Spry > Información sobre herramientas de Spry.
    Nota: También puede insertar un widget de información sobre herramienta a través de la categoría Spry del panel Insertar.

    Esta acción inserta un nuevo widget de información sobre herramienta con un contenedor para el contenido de la información sobre herramienta y una declaración de marcador de posición que actúa como desencadenante de la información sobre herramienta.

    También puede seleccionar un elemento existente en la página (por ejemplo, una imagen) y después insertar la información sobre herramienta. Al hacerlo, el elemento seleccionado actúa como nuevo desencadenante de la información sobre herramienta. La selección debe ser un elemento de etiqueta completo (por ejemplo, una etiqueta img o una etiqueta p) de manera que Dreamweaver pueda asignarle un ID en el caso de que no tenga uno ya asignado.

    Edición de opciones de widget de información sobre herramienta

    Puede establecer opciones que le permiten personalizar el comportamiento del widget de información sobre herramienta.

    1. Pase el puntero del ratón o sitúe el punto de inserción en el contenido de la información sobre herramienta en la página.

    2. Haga clic en la ficha azul del widget de información sobre herramienta para seleccionarla.

    3. Establezca las opciones del inspector de propiedades del widget de información sobre herramienta como desee.

    Nombre
    El nombre del contenedor de la información sobre herramienta. En el contenedor se sitúa el contenido de la información sobre herramienta. De manera predeterminada, Dreamweaver utiliza una etiqueta div como contenedor.

    Desencadenante
    El elemento de la página que activa la información sobre herramienta. De manera predeterminada, Dreamweaver inserta como desencadenante una declaración de marcador de posición rodeada por etiquetas span, pero puede seleccionar cualquier elemento de la página que disponga de un ID exclusivo.

    Seguir al ratón
    Cuando está seleccionada esta opción, la información sobre herramienta sigue al ratón al pasarlo por encima del elemento desencadenante.

    Ocultar al situarse fuera el ratón
    Cuando está seleccionada esta opción, la información sobre herramienta se mantiene abierta mientras el ratón esté pasando por encima de la información sobre herramienta (aunque el ratón abandone el elemento desencadenante). Dejar la información sobre herramienta abierta resulta útil si contiene vínculos u otros elementos interactivos. Si no se selecciona esta opción, el elemento de información sobre herramienta se cierra cuando el ratón sale del área desencadenante.

    Desplazamiento horizontal
    Calcula la posición horizontal de la información sobre herramienta en relación con el ratón. El valor de desplazamiento se expresa en píxeles y el desplazamiento predeterminado es de 20 píxeles.

    Desplazamiento vertical
    Calcula la posición vertical de la información sobre herramienta en relación con el ratón. El valor de desplazamiento se expresa en píxeles y el desplazamiento predeterminado es de 20 píxeles

    Demora para mostrar
    La demora, expresada en milisegundos, hasta que aparece la información sobre herramienta una vez que se ha entrado en el elemento desencadenante. El valor predeterminado es 0.

    Demora para ocultar
    La demora, expresada en milisegundos, hasta que desaparece la información sobre herramienta una vez que se ha abandonado el elemento desencadenante. El valor predeterminado es 0.

    Efecto
    El tipo de efecto que desea utilizar cuando aparezca la información sobre herramienta. Persiana simula la persiana de una ventana que sube y baja para mostrar y ocultar la información sobre herramienta. Desvanecer efectúa un fundido al mostrar y ocultar la imagen. El valor predeterminado es Ninguno.