Es muy común creer que estos
tooltips se agregan mediante el atributo
ALT ya que
Internet Explorer los muestra como tales, ¿y por qué
Firefox no? La respuesta es simple,
Microsoft no sigue las reglas, adapta los lenguajes a su conveniencia y de allí, las dificultades que se nos presentan al armar una página, hay cosas que ciertos navegadores harán de una manera y otros no.
La
w3.org dice que el atributo
alt debe ser utilizado como texto alternativo (para cuando no pude ser mostrada la imagen o el objeto) y que, el atributo para mostrar un
tooltip es
title="un texto cualquiera" (coloquen el puntero del ratón sobre cada imagen para ver la diferencia).
 | |
| <img src="..." alt="Internet Explorer"> | <img src="..." title="cualquier navegador"> |
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á
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
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áY en este pseudoelemento:
hover que define el estilo cuando el ratón pasa sobre él
Creamos una clase CSS dándole un nombre único (cualquier nombre que no exista), en este caso, la llamé Ntooltip y la agregamos a las declaraciones de estilo de la plantilla. El código para este ejemplo es el siguiente:
a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}
a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}
a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}
a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em; left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
}
Y se debería usar así:
<a class=Ntooltip href="#">
el texto visible
<span>
... el texto oculto (cualquier código HTML) ......
</span>
</a>La explicación es esta. Vamos a crear un elemento
A (un
link) dentro del cual colocaremos un bloque mediante el
tag SPAN. La clase
NTooltip será el estilo de ese
link.
Este tipo de
link (estilo
a.Ntooltip) se ve "
normal" (
position: relative), el resto de las propiedades depende de las necesidades de cada uno, puede modificarse el color, la fuente, etc. La única precaución que se debe tener es verificar si el estilo
SE VE. Como la plantilla ya posee una definición para los elementos
A, es probable que se deba
FORZAR a que la nueva sea tomada en cuenta, para eso, podemos agregarle
!important para forzar a que el navegador la use. Por ejemplo:
color:#0080C0 !important; font-weight:bold !important;
Cuando el puntero del ratón está sobre el
link, el estilo cambia (
a.Ntooltip:hover) le hemos dicho al navegador que está por encima de todo (
z-index). Lo único que podría personalizarse es la propiedad
background-color que
DEBE ESTAR DEFINIDA, aunque sea con el mismo color del fondo de la página.
El bloque
A contiene en su interior otro bloque (
a.Ntooltip span) que, generalmente está oculto
display: none). La página lo carga, pero no lo muestra.
Por último determinamos el estilo que tendrá ese bloque cuando al pasar el puntero del ratón, se haga visible (
a.Ntooltip:hover span). Con
display:block hacemos que el bloque se muestre y con
position:absolute le ordenamos que quede fijo, que no desplace el resto de la página hacia abajo. Con estas dos propiedades logramos que se superponga a cualquier otro elemento de la pantalla, lo que produce el efecto deseado.
Es aquí donde deberíamos definir las características que tendrá la "
ventanita" (colores, fuentes, alineación, bordes, etc). Sería deseable que decidamos cuáles serán las propiedades por defecto, de tal manera de no tener que escribir demasiado código cada vez que querramos utilizarlas.
Dentro del bloque
SPAN que permanecerá oculto, puede escribirse cualquier tipo de código (probablemente no cualquiera, pero la mayoría). Asimismo, es posible sobrescribir el estilo que definimos por defecto. Para ello, basta agregar otro, dentro del
tag SPAN. Por ejemplo:
Con las propiedades left y top podemos determinar la posición donde se va a mostrar, estos valores, expresados en pixeles (px), pueden ser positivos o negativo, por ejemplo, si top es negativo se verá por encima del puntero.
Por la estructura que tienen las plantillas de Blogger, es posible que el bloque no se vea por completo si su ancho sobrepasa la columna lateral. Al hacerse visible, el bloque se superpondrá sobre cualquier elemento del área principal (la de entradas) pero no sobre otras áreas. Es aconsejable que el vínculo visible quede siempre hacia el lado contrario de la pantalla.
REFERENCIAS CSS
HTML correcto 
(en castellano)
Taller de CSS (en castellano)
CSS Tutorial (en inglés)
Stu Nicholls CSSplay (en inglés)
El resultado es este.
