Todo Para el WebMaster

Muy buen vídeo, una parodia de Matrix corriendo bajo Windows xp, esta en ingles pero seguro que lo esencial del vídeo se entiende a la perfección aunque no entiendas de este idioma.

Un tooltip

es una herramienta de ayuda visual, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

En este post vamos a crear tooltip personalisados utilizando solo CSS.

Como Primera acción veamos en detalle el codigo CSS, este es el corazón y pulmón de nuestros ToolTips.
Como veran el codigo es bastante simple para quienes conocen lo minimo de CSS.

a.tooltip { /*Propiedades del texto visible*/
position

determina la forma en que se ubica un elemento.


RELATIVE: es el valor por defecto.


ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.

: relative; /* posición */
text-decoration: none !important; /* Eliminamos el subrayado */
color:#0080C0 !important; /* Cambiamos el color de texto */
font-weight:bold !important; /* negritas al texto */
}

a.tooltip:hover

Define el estilo cuando el ratón pasa sobre él.

{/*Hace aparecer el cuadro*/
z-index

Número de orden dentro de la pila de elementos
como los elementos pueden ubicarse en posiciones absolutas dentro
de la página, algunos pueden superponerse visualmente con otros,
para controlar cuál estará por encima, les asignamos un número entero,
cuanto más alto sea el número, más arriba estará.

:999; /* Definimos que este por encima de todo */
background-color:#000000; /* obligatorio definir color de fondo */
}

a.tooltip span { /* Ocultamos el elemento */
display

establece si un elemento será mostrado y cómo será mostrado


BLOCK: un salto de línea antes y después del elemento


INLINE: ningún salto de línea antes ni después del elemento


NONE: no se mostrará

: none;
}

a.tooltip:hover span { /*Propiedades del cuadro*/
display

establece si un elemento será mostrado y cómo será mostrado


BLOCK: un salto de línea antes y después del elemento


INLINE: ningún salto de línea antes ni después del elemento


NONE: no se mostrará

: block; /* se muestra el cuadro */
position

determina la forma en que se ubica un elemento.


RELATIVE: es el valor por defecto.


ABSOLUTE: se lo fuerza a ubicarse en un determinado lugar.

: absolute; /* posicion de cuadro */
top:2em; left:2em;
width:250px; /* ancho del cuadro */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* color de fondo*/
color: #FFFFFF; /* color del texto */
}

Ahora crearemos las etiquetas que le daran vida...

<a class="tooltip" href="#"> el texto visible
<span> el texto oculto (cualquier código HTML)
</span>
</a>

Fuente: Vagabundia

Esto surgio con la necesidad de crear un menu estatico a pedidio de un cliente;
en un primer momento se cree que va a resultar un poco complicado, tal vez, hasta necesario utilizar javascript.

Pero encontre una solución al problema de una manera asombrosamente simple.... CSS.

Como primer paso creamos el div que va a contener el texto estatico.

<div class="static-id"></div>
Aqui el contenido estatico....
</div>

Ahora vemos a continuación el codigo CSS.

static-id {
position: fixed;
}

Tal vez seria mucho mas simple de la sguiente manera.

<div style="position: fixed;"></div>
Aqui el contenido estatico....
</div>

Ejemplo de menu estatico.

Solo tiene un pequeño problema, no funciona en IE6.
Espero les sea de utilidad, o por lo menos educativo.