2019 - © MAUVIMI - Tuluá (Valle) - Colombia - mauvimi@yahoo.es
Rockero_GIF_MVM_160x160
Este plugin para Tooltips es, en mi concepto, el más completo, facil de administrar y de instalar; y además es extremadamente configurable. Como características propias del plugin: Se adapta automaticamente al ancho del texto dentro de la caja contenedora del Tooltip. Puede contener dentro de la caja contenedora: Texto, HTML, imagenes, rompimiento de líneas, tablas, listas, etc. o la combinación de las anteriores. Convierte dinamicamente elementos HTML a Tooltip. Versatilidad en sus tooltips que pueden ser de forma normal con recuadro, globo con fondo amarillo o globo de fondo blanco. o si tu lo deseas del fondo y de la apariencia que tu imaginación pueda definir.

Modo de instalación:

1. Modifica a tu gusto el archivo wz_tooltip.js (para abrirlo te recomiendo el programa "WordPad" que viene incluido en la instalación de Windows o su homólogo en otras plataformas) en la parte de configuración que verás en los siguientes enlaces (como los comandos a modificar son extensos, los he divido en 3 partes para mayor comprensión): Igualmente debes configurar el archivo tip_globo.js, en la parte que se muestra a continuación: 2. Crea una carpeta con el nombre que gustes (a través del "File Manager") y copia la librería del plugin (ya modificada a tu gusto) dentro de esa carpeta. Toda la librería debe estar contenida en una sola carpeta. 3. Crea la DECLARACION en la página donde va a utilizar el Tooltip o en la Plantilla (Templete) de su sitio Web. Solo debes modificar la ruta donde colocaste la librería. Por ejemplo: si la carpeta que creaste se llama "tooltips_wz_walter_zorn" para el caso del archivo wz_tooltip.js, entonces la ruta quedaria asi: src="http://mauvimi.tk/tooltips_wz_walter_zorn/wz_tooltip.js" Asi debes modificar cada sentencia de la declaración. Esta DECLARACION amerita estar en la "PLANTILLA BASE" o cabecera, pués tu no sabes en cuantas páginas vas a emplear un tooltip. En este caso la "DECLARACION" debes crearla en lo que he denominado "LA PLANTILLA BASE", es decir, el encabezado o entre las etiquetas "HEAD", si eres webmaster avanzado. 4. Crea por cada Tooltip definido (palabra, imagen, etc.) el CODIGO respectivo a su tooltip. Si tu lo prefieres puede cambiar la configuración para cada Tooltips en forma individual (color de fondo, color del texto, bordes, etc.). Cuando se modifica individualmente un tooltip, las variables individualizadas tienen prelación a las configuradas en el archivo wz_tooltip.js. Si decides modificar los atributos individualmente, el CODIGO debe estar escrito de la siguiente forma en la parte onmouseover solamente (si no te gusta el onmouseover cambialo por onclick para que solo se active cuando hagas click y no cuando pasa el mouse sobre el enlace), nota que las variables a modificar deben estar en MAYUSCULAS para que tengan efecto y puedes colocar tantas como desees con el proposito de dar rienda a tu imaginación y gusto, como por ejemplo: onmouseover="Tip( 'Aqui colocas el texto o imagen que quieres mostrar', BALLON, true, -----> Si quieres que el tooltip este contenido en un globo BALLOONIMGPATH, 'aqui debes colocar la ruta donde estan las imagenes de tu globo personalizado', --> Si quieres imagenes diferentes en tu globo TITLE, 'Aqui colocas el encabezado del tooltip', CENTERMOUSE, false, STICKY, true, OFFSETX, 80, LEFT, true ----> la última sentencia NO termina con coma )" Las posibilidades de configurar el tooltip son verdaderamente extensas, que de hecho de eso se trata, la idea es que nada te limite. También se pueden crear imagenes personalizadas para dar un matiz original a tu globo. Debes tener en cuenta que las imagenes relacionadas a las esquinas (lt.gif, rt.gif, rb.gif y lb.gif) deben ser cuadráticas, y sus lados izquierdo y derecho deben ser iguales en ancho (l.gif, r.gif) igual sucede con los lados de arriba y de abajo (t.gif, b.gif). Estos cambios se pueden realizar si prefieres colores de fondo, bordes y rabillo distintos a los que originalmente vienen en la carpeta de imágenes. Por otro lado, si te parece enredado lo de la "LA PLANTILLA BASE", sólo debes crear la "DECLARACION" y el "CODIGO", por separado, y los pegas o los incrustas en la página donde vas a utilizar el tooltip. El segundo método sólo aplica a la página donde vas a utilizar el tooltip y si deseas aplicar el tooltip en otra página debes pegar nuevamente la "DECLARACION", que es lo que se evita con el primer método. Como variante de este método puedes unir la "DECLARACION" y el "CODIGO" y crear SOLO UNA sentencia para copiar en cada página donde vas a utilizar el truco. Por otra parte, debes conocer que entre menos declaraciones contenga "LA PLANTILLA BASE" acelera el cargue de las páginas del sitio Web. Usa las declaraciones con moderación.

Código para TOOLTIPS - Walter Zorn

Haz Interesante Tu Web

HTML: TOOLTIPS - Walter Zorn

Si no tienes un enlace específico en la sentencia href puedes cambiarla por href="javascript:void(0);"
DESCARGA LOS ARCHIVOS RELACIONADOS CON ESTE PLUGIN (LIBRERIA) AQUI El .zip contiene: wz_tooltip.js (librería principal). tip_centerwindow.js (Extensión de la librería para centrar el Tooltip). tip_followscroll.js (Extensión de la librería para fijar el Tooltip en la ventana del navegador asi se utilice la barra desplazadora). tip_globo.js (Extensión de la librería que hace posible el efecto de globo en el Tooltip). tip_balloon (carpeta que contiene las imagenes de los globos de fondo amarillo). NO saques los archivos de esta carpeta, NI le cambies los nombres, debes copiar esta carpeta dentro de la carpeta que creaste tal cual. tip_balloon_simple (carpeta que contiene las imagenes de los globos de fondo blanco). NO saques los archivos de esta carpeta, NI le cambies los nombres, debes copiar esta carpeta dentro de la carpeta que creaste tal cual.

Código Ejemplo Globo Simple

Código Ejemplo Globo


DECLARACION
Pasa el Ratón sobre la palabra servidores para visualizar los ejemplos. Ejemplo Simple --> Ejemplo Globo --> Ejemplo Globo Simple --> Ejemplo Ampliar Imagenes --> Configuración Tooltips (Ver Abajo)
MENU
MAUVIMI
MAUVIMI
2019 - © MAUVIMI - Tuluá (Valle) - Colombia - mauvimi@yahoo.es
Rockero_GIF_MVM_160x160
Este plugin para Tooltips es, en mi concepto, el más completo, facil de administrar y de instalar; y además es extremadamente configurable. Como características propias del plugin: Se adapta automaticamente al ancho del texto dentro de la caja contenedora del Tooltip. Puede contener dentro de la caja contenedora: Texto, HTML, imagenes, rompimiento de líneas, tablas, listas, etc. o la combinación de las anteriores. Convierte dinamicamente elementos HTML a Tooltip. Versatilidad en sus tooltips que pueden ser de forma normal con recuadro, globo con fondo amarillo o globo de fondo blanco. o si tu lo deseas del fondo y de la apariencia que tu imaginación pueda definir.

Modo de instalación:

1. Modifica a tu gusto el archivo wz_tooltip.js (para abrirlo te recomiendo el programa "WordPad" que viene incluido en la instalación de Windows o su homólogo en otras plataformas) en la parte de configuración que verás en los siguientes enlaces (como los comandos a modificar son extensos, los he divido en 3 partes para mayor comprensión): Igualmente debes configurar el archivo tip_globo.js, en la parte que se muestra a continuación: 2. Crea una carpeta con el nombre que gustes (a través del "File Manager") y copia la librería del plugin (ya modificada a tu gusto) dentro de esa carpeta. Toda la librería debe estar contenida en una sola carpeta. 3. Crea la DECLARACION en la página donde va a utilizar el Tooltip o en la Plantilla (Templete) de su sitio Web. Solo debes modificar la ruta donde colocaste la librería. Por ejemplo: si la carpeta que creaste se llama "tooltips_wz_walter_zorn" para el caso del archivo wz_tooltip.js, entonces la ruta quedaria asi: src="http://mauvimi.tk/tooltips_wz_w alter_zorn/wz_tooltip.js" Asi debes modificar cada sentencia de la declaración. Esta DECLARACION amerita estar en la "PLANTILLA BASE" o cabecera, pués tu no sabes en cuantas páginas vas a emplear un tooltip. En este caso la "DECLARACION" debes crearla en lo que he denominado "LA PLANTILLA BASE", es decir, el encabezado o entre las etiquetas "HEAD", si eres webmaster avanzado. 4. Crea por cada Tooltip definido (palabra, imagen, etc.) el CODIGO respectivo a su tooltip. Si tu lo prefieres puede cambiar la configuración para cada Tooltips en forma individual (color de fondo, color del texto, bordes, etc.). Cuando se modifica individualmente un tooltip, las variables individualizadas tienen prelación a las configuradas en el archivo wz_tooltip.js. Si decides modificar los atributos individualmente, el CODIGO debe estar escrito de la siguiente forma en la parte onmouseover solamente (si no te gusta el onmouseover cambialo por onclick para que solo se active cuando hagas click y no cuando pasa el mouse sobre el enlace), nota que las variables a modificar deben estar en MAYUSCULAS para que tengan efecto y puedes colocar tantas como desees con el proposito de dar rienda a tu imaginación y gusto, como por ejemplo: onmouseover="Tip( 'Aqui colocas el texto o imagen que quieres mostrar', BALLON, true, -----> Si quieres que el tooltip este contenido en un globo BALLOONIMGPATH, 'aqui debes colocar la ruta donde estan las imagenes de tu globo personalizado', -- > Si quieres imagenes diferentes en tu globo TITLE, 'Aqui colocas el encabezado del tooltip', CENTERMOUSE, false, STICKY, true, OFFSETX, 80, LEFT, true ----> la última sentencia NO termina con coma )" Las posibilidades de configurar el tooltip son verdaderamente extensas, que de hecho de eso se trata, la idea es que nada te limite. También se pueden crear imagenes personalizadas para dar un matiz original a tu globo. Debes tener en cuenta que las imagenes relacionadas a las esquinas (lt.gif, rt.gif, rb.gif y lb.gif) deben ser cuadráticas, y sus lados izquierdo y derecho deben ser iguales en ancho (l.gif, r.gif) igual sucede con los lados de arriba y de abajo (t.gif, b.gif). Estos cambios se pueden realizar si prefieres colores de fondo, bordes y rabillo distintos a los que originalmente vienen en la carpeta de imágenes. Por otro lado, si te parece enredado lo de la "LA PLANTILLA BASE", sólo debes crear la "DECLARACION" y el "CODIGO", por separado, y los pegas o los incrustas en la página donde vas a utilizar el tooltip. El segundo método sólo aplica a la página donde vas a utilizar el tooltip y si deseas aplicar el tooltip en otra página debes pegar nuevamente la "DECLARACION", que es lo que se evita con el primer método. Como variante de este método puedes unir la "DECLARACION" y el "CODIGO" y crear SOLO UNA sentencia para copiar en cada página donde vas a utilizar el truco. Por otra parte, debes conocer que entre menos declaraciones contenga "LA PLANTILLA BASE" acelera el cargue de las páginas del sitio Web. Usa las declaraciones con moderación.

Código para TOOLTIPS - Walter Zorn

Haz Interesante Tu Web

HTML: TOOLTIPS - Walter Zorn

Si no tienes un enlace específico en la sentencia href puedes cambiarla por href="javascript:void(0);"
DESCARGA LOS ARCHIVOS RELACIONADOS CON ESTE PLUGIN (LIBRERIA) AQUI El .zip contiene: wz_tooltip.js (librería principal). tip_centerwindow.js (Extensión de la librería para centrar el Tooltip). tip_followscroll.js (Extensión de la librería para fijar el Tooltip en la ventana del navegador asi se utilice la barra desplazadora). tip_globo.js (Extensión de la librería que hace posible el efecto de globo en el Tooltip). tip_balloon (carpeta que contiene las imagenes de los globos de fondo amarillo). NO saques los archivos de esta carpeta, NI le cambies los nombres, debes copiar esta carpeta dentro de la carpeta que creaste tal cual. tip_balloon_simple (carpeta que contiene las imagenes de los globos de fondo blanco). NO saques los archivos de esta carpeta, NI le cambies los nombres, debes copiar esta carpeta dentro de la carpeta que creaste tal cual.

Código Ejemplo Globo Simple

Código Ejemplo Globo


DECLARACION
Pasa el Ratón sobre la palabra servidores para visualizar los ejemplos. Ejemplo Simple --> Ejemplo Globo --> Ejemplo Globo Simple --> Ejemplo Ampliar Imagenes --> Configuración Tooltips (Ver Abajo)
MAUVIMI