Estaba en el trabajo realizando unas interfaces de usuario (perdón: GUI's) cuando vi que un texto de aviso podría llegar a quedar mucho mejor si en vez de un tosco marco colocaba el mismo dentro de una burbuja de diálogo.
Así que, manos a la obra me dije peeeero... luego de buscar un poco por aqui y por allá me encontre con soluciones demasiado complejas que si bien son muy vistosas me parecieron excesivas, ni hablar de las que utilizan jQuery.
Hubo que ponerle ganas y hacerlo uno mismo, así que buscándole la vuelta llegué a un código que para mi gusto esta bastante compacto y claro:
<div style="overflow:auto;width:50%;">
<img src="tip_top.gif" style="float: right; margin-right: 10px;"/>
<div style="border: solid 1px #CCC; margin-top: 6px; padding: 5px; background: #FFF;">
contenido de prueba
contenido de prueba
contenido de prueba
</div>
</div>Es casi sin estilos y solo algunos tags, de acuerdo que la burbuja en este caso solo señala hacia arriba pero
modificándolo un poco seguro se adapta a mas de una necesidad.
Lo primero es un div que actúa como contenedor de los demás elementos, aquí podemos definir el ancho que queramos, luego colocamos la imagen que marca el origen del diálogo y seguido otro div que sera el que defina el borde de nuestra burbuja.
Ahora lo interesante, al darle a la imagen un float: right; esta se coloca encima de nuestro segundo div, con un poco de margen en la misma y en este div de contenido podemos afinar posiciones, y listo, un diálogo súper sencillo.
Si se quiere posicionar la imagen con respecto al elemento que lo invoque un poco de javascript basta, solo tenemos que obtener su posición y ajustar el left y top del contenedor principal, lo probé en varias versiones de FF, Chrome, Opera, IE y Safari tanto en Linux como Windows y no tuve problemas, mas sencillo creo que difícil.
PD: adjunto la imagen del tip en este ejemplo para ahorrarles el trabajo, eso si, solo en borde gris :)
No hay comentarios:
Publicar un comentario