JMiur [E]

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
123
102030
100200300
100020003000
111122223333
CLICK AQUI

Checkbox 1
Checkbox 2
Checkbox 3

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:


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.

25 comentarios:

Richard G.  

hola amigo, muy buena la explicacion de los "Tooltips vs Popups", buscando y buscando os encontre y claro mi pregunta es,¿como hago para hacer eso pero en lenguaje html/css? esque mi pagina no soporta javascript y no encuentra la forma de conseguir el codigo para dichas ventanas.
Gracias por adelantado y felicitaciones por su blog.

Responder
JMiur  

richare:

Si no existe la posibilidad de utilizar los eventos onClick, onMouseOver u onMouseOut, no hay manera de resolver el tema.

De cualquier manera, no son las páginas las que no soportan JavaScript (por lo menos en Blogger) sino lo navegadores los que lo tienen deshabilitado.

Como medida de seguridad me parece un poco exagerada ya que, si de eso se trata, hay formas de establecer cuáles son los dominios donde se habilita y cuáles no.

Responder
Richard G.  

Mas detalles:
Gracias por la pronta respuesta.
Resulta que yo tengo una pagina en www.myspace.com y claro ahi solo se admite dhtml/html y css.
Tengo una seccion que como va agrandecer, quisera que al clicar un boton,por ejemplo Leer mas, pues me abra una pequeña ventana y he buscao por muchisimas pagina de ayudas, tutoriales ...en fin 2 dias llevo y no lo consigo.
Lo unico facil que veo es poner un hiperenlace que lo diriga a este mismo blog que me acabo de crear http://elalmacenderichard.blogspost.com
De todas formas muchas gracias por tu atencion y amabilidad

Responder
JMiur  

Ahora entiendo, creí que la página era l a de Blogger. Me temo que con MySpace mucho no puedo ayudar porque desconozco su funcionamiento.

Responder
Richard G.  

Su funcionamiento dice esto justo donde esta la parte del editor para construirla, te avisan de esto mismo:
Puedes introducir HTML/DHTML o CSS en cualquier campo de texto. No se permite lenguaje Java.
No se puede usar HTML/CSS para cubrir anuncios en MySpace.
Por eso estoy buscando el codigo para crear esas ventanas que te ayudan a mostrar archivos anteriores.

Responder
JMiur  

¿Has intentado utilizar estos códigos? Me refiero a eventos que manipulan propiedades como mouseover.

Lo digo porque DHTML es justamente eso. Por ejemplo:

<a href="XXXX"
style="#00FF00"
onmouseover="this.style.color='#FF0000';"
onmouseout="this.style.color='#00FF00';">
ENLACE
</a>

cambia el color del enlace cuando se pasa el mouse sobre él. Eso, es DHTML (HTML dinámico). Si MySpace dice aceptarlo, debería funcionar.

Responder
Richard G.  

Si eso mismo lo he probado anteriormento incluso lo tengo asi en mi pagina, pero yo eso mismo lo hago de otra forma, siempre que esten entre style y /style>.
el codigo seria este: a:hover{
color:Yellow;
}

asi al pasar el mouse, cambiaria a a color amarillo.

Responder
Richard G.  

...perdon me olvidaba de dejar mi pagina: www.myspace.com/jazzloungeclub

Responder
JMiur  

Claro, en este caso el resultado es el mismo, usando STYLE podemos controlar las propiedades del mismo modo que usando un evento. Por supuesto, si intentamos crear algo más complejo, no nos queda más remedio que recurrir a los scripts. Hasta aquí, no le veo salida.

Responder
Anónimo  

oye no puedo ponerle color a mis comentarios ni a mi perfil ... quiero hacer eso pero no se como hacerlo

Responder
JMiur  

Vas a tener que aclarar mejor cuál es tu problema.

Responder
Quique  

Que bueno! estoy peleandome con ello pero no consigo entender donde se mete el estilo. Lo hago directamente en la plantilla de blogger pero lo entiende como si fuera puro texto.
Entiendo que el estilo se añde a la plantilla (no se de que forma) y luego lo que quiere añadirse -en el caso mio en el sidebar- como si fuera un elemento mas aparte no? vamos como tu biografia apocrifa que por cierto es buenisima!

¿Donde hay que colocarlo?

Responder
JMiur  

Quique:

El estilo va en la plantilla, antes de la etiqueta </head> y debe colocarse entre las etiquetas:

<style type='text/css'>
................ AQUI VA EL CODIGO
</style>

Luego, tal como dices, puede usarse en cualquier parte del blog, en la sidebar o en un post.

Prueba a ver si esto resuelve tus dudas y si no, envíame un mail y vemos los detalles.

Responder
Quique  

No me hagas caso! me tiene que salir... argh! llevo peleandome un rato pero ya empieza a verse algo aunque todavia me queda!

gracias maestro!

Responder
JMiur  

Entonces, me callo y te dejo trabajar tranquilo :D

Responder
Quique  

si, lo tengo pendiente! cuando me meta mas a fondo ya te hare preguntas mas consistentes...

Feliz año nuevo! :)

Responder
Shark_Bloody  

Hola JMiur, quite position absoute para que no quede flotante, pero tengo un problema, toma el ancho del contenedor padre, que en este caso es el main-wrapper.

¿Como hago para que el ancho se adapte al contenido interno?

Por ejemplo, si el contenido ocupa 300px, que el ancho del tooltip sea de 300px.

Responder
JMiur  

Tendría que verlo online pero, probableemnte, poniéndole ese valor del ancho con width.

En los ejemplos del post uso esa propiedad.

Responder
HaCk CrAcK  

Hola, y como haria para que un blogque este oculto si estoy en la pagina principal, pero si estoy en el blog que aparesca?

Responder
JMiur  

Habría quever el ejemplo concreto pero, así en general, deberías usar un condicional:

<b:if cond='data:blog.pageType= &quot;item&quot;'>
<style>
...el bloque está abierto...
</style>
&l;/b:else/>
<style>
...el bloque está cerrado...
</style>
</b:if>

Responder
SergioFM  

Hola, el post es muy antiguo pero me resultó interesante... Resulta que he querido aplicar los tooltips en mi blog pero no me animo, pero viendolos así creo que me gustarían... Solo que tengo una pregunta ¿cómo hacer para que no salga con color de fondo ni nada?

Por ejemplo, me gustaría que saliera en texto simple para usarlo con palabras extrañas para así dar su definición. No se si me explico pero sería mas o menos así:
Texto con una frase extraña
Pero en la etiqueta a sería el tooltip pero viéndose como un link. Similar a como se ve cuando se usa infolinks.

Espero me ayudes. De antemano Gracias!

JMiur  

Para eso te conviene usar algún otro sistema de tooltips menos engorroso donde no debas estar definiendo cada uno de ellos individualmente.

SergioFM  

Pero la idea es definir solo palabras que yo desee ya que lo usaré pocas veces.
Me gustaría esta clase de tooltips que das como ejemplos, pero la forma en que se muestran me gustaría que se vieran como si fuesen un link.

SergioFM  

Mira, me gustaría así como el que sale en esta página: haz clic aquí... Pero me gustaría que sea así como el que describes tu arriva, que no se ponga cuando se pasa el mouse sino cuando se haga clic y que se pueda usar en texto enmedio de cualquier contenido.

Espero haberme explicado. De antemano gracias.

JMiur  

Son dos cosas diferentes; con CSS sólo peude usarse hover; si se quiere que reaccionen a un click debe usarse JavaScript.

En el caso de estos ejemplos, el estil ocon que se muestran depende de lo que hayas colocado y puede variar compeltamente aunque, en todos los casos, necestarás tener un botón que permita cerrarlos.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR