Tooltips vs Popups

Los Post expandibles y las Tooltips avanzadas, no son otra cosa que una forma de mostrar y ocultar elementos de manera dinámica, manipulando sus propiedades.

Siguiendo con la misma idea esta es una manera simple de incluir bloques con algún tipo de información que sólo será mostrada cuando el usuario lo requiera.

Áreas que admiten textos e imágenes. CLICK AQUI	CLICK AQUI	TITULO 1 2 3 10 20 30 100 200 300 1000 2000 3000 1111 2222 3333 CLICK AQUI	Checkbox 1 Checkbox 2 Checkbox 3 SeleccionarPrimeroSegundoTerceroCuarto CLICK AQUI
Willie, what can I say to you to hold true in your changing life? You've come into a cruel world : little girls can lose their way in the growing night. I hope you'll be alright. Willie, try to stay a child sometime, for as long as you feel you can learn. Babies all turn to people, and people can really be strange: they change and, changing, bring pain. Wilhelmina by Peter Hammill from The silent corner and the empty stage. CLICK AQUI		Uno dos y tres cuatro cinco seis y siete CLICK AQUI

Los ejemplos han sido realizados y verificados en Firefox, los usuarios de Internet Explorer deberán modificar los valores de los márgenes de los elementos ya que este navegador los interpreta de otra manera.

Lo primero que debe hacerse es crear una clase CSS dándole un nombre único (cualquier nombre que no exista), en este caso, la llamé Btooltip y la agregamos a las declaraciones de estilo de la plantilla. Estas son las propiedades mínimas que debe poseer:

.BTooltip-contenedor {
display: none; /* el elemento va a estar oculto */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
background-color: #000000; /* por defecto, el color de fondo como la pantalla */
margin: 0; /* no tiene márgenes */
overflow:hidden; /* si el contenido sobresale, no se muestra */
z-index:999; /* va a estar por encima de todo */
height:auto; /* la altura va a depender del contenido */
}

.BTooltip-barra {
margin: 0; /* no tiene márgenes */
otras_propiedades /* definir las propiedades de la fuente y alineación */
}

.BTooltip-contenido {
display: block; /* se fuerza a mostrar el bloque */
height:auto; /* la altura va a depender del contenido */
otras_propiedades /* definir las propiedades de la fuente y alineación */
}

Y la forma de utilizarla es la siguiente:

1. el vínculo/botón/imagen donde se hace click para "abrir" la ventana
<div>
     <a href="javascript:void(0);" 
          onclick="getElementById('nombre_unico').style.display='block';">
               CLICK AQUI
     </a>
</div>

2. el bloque oculto con el el código y el contenido de la ventana
<div id="nombre_unico" class="BTooltip-contenedor" style="...propiedades...">
     en esta demostración, el bloque contiene tres sub-bloques, uno, debajo del otro

     2.1 una barra con el título (opcional)
     <div class="Btooltip-barra" style="...propiedades...">TITULO</div>

     2.2 el contenido en si mismo
     <div class="BTooltip-contenido" style="...propiedades...">
          ....... cualquier código HTML .......
     </div>

     2.3 una barra para volver a ocultar el bloque (opcional)
     <div class="BTooltip-barra" style="...propiedades...">
          <a href="javascript:void(0);" 
               onclick="getElementById('nombre_unico').style.display='none';">
                    CERRAR
          </a>
          NOTA: puede colocarse en cualquier otro lado o utilizarse una imagen
     </div>

</div>

En todos los casos, el DIV donde se define la clase, incluye una propiedad STYLE que debería contener las propiedades del contenido. De todas ellas, hay dos que deben ser consideradas:

BTooltip-contenedor debería incluir el ancho de la ventana:
style= "width: cantidad_pixeles;"

El segundo punto importante es que mediante el estilo de BTooltip-contenedor controlamos la posición de la ventana. Por defecto, la ventana se creará siempre al lado del vínculo que la abre. Para ubicarla en otra posición debemos modificar la propiedad margin. No hay valores que puedan darse ya que estos dependen del tamaño del vínculo, del tamaño de la ventana y del navegadir. Aquí hay un ejemplo simple:

click TITULO style="margin-left y margin-top: valores negativos" CERRAR	click TITULO style="margin-top: un valor negativo" CERRAR
click TITULO style="margin-left: un valor negativo" CERRAR	click TITULO Sin parámetros. Posición por defecto. CERRAR

En términos generales:
valores positivos en margin-left la ubicarán hacia la derecha y negativos hacia la izquierda
valores positivos en margin-top la ubicarán hacia abajo y negativos hacia arriba.

La utilidad de estas psudo-tooltips es que nos permiten agregar información similar a un popup pero, al ser parte de la misma página, se abren muy rápidamente; además, como son personalizables, con un poco de trabajo y mucha, mucha paciencia, pueden crearse cosas que sean útiles y visualmente atractivas.