Tooltips usando CSS

Tooltip no es una palabra que pueda traducirse con facilidad. Estas ventanitas, generalmente de fondo amarillo o gris, aparecen cuando colocamos el puntero del ratón sobre un objeto de la pantalla.

Esta es una Tooltip (poner el puntero encima) ¿Y para qué sirve? Para muy poco, sin embargo, es posible crear algo que funcione de manera similar pero más interesante. Y para esto, basta tener una pequeña idea de como funcionan las hojas de estilo. Por ejemplo, esta es una TooltipEsto ya va tomando otro color
Si alguien quiere saber qué puede hacerse,
es mejor que continúe leyendo. mejorada.

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">

El atributo title no sólo puede ser aplicado a una imagen, es aceptado por casi todos los elementos (ver lista completa):

UN LINK: para ver el ejemplo hay que poner puntero AQUI ARRIBA
UN PARRAFO: para ver el ejemplo hay que poner puntero AQUI ARRIBA

¿Y esto para qué sirve? Para muy poco, sin embargo, es posible crear un nuevo tipo que puede hacer las cosas más interesantes y para esto no hace falta saber JavaScript ni nada por el estilo, basta tener una pequeña idea de como funcionan las hojas de estilo.

Poniendo el cursor AQUI Ya no es una ventanita amarilla.
Es más grande, de otro color ... la tooltip se transforma un poco.

Y poniendo el cursor AQUI Parece difícil pero no lo es. las cosas se ponen interesantes.

Puede contener cualquier COSAIncluso una tabla.

celda 1	celda 2
celda 3	celda 4

La clave está en estas propiedades:

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:

Este tiene OTRO COLOR<span style="background-color:rgb(255, 153, 51);"> y este otro utiliza UNA IMAGEN<span style="background: url(container-bg.gif) repeat-y;"> como fondo. El resto depende de la imaginación de cada uno.

Puede ser ALGO PEQUEÑOUt wisi enim ad minim veniam, quis nostrud exerciderfo nistyuil opita. o ALGO GRANDE

Zzril delenit augue
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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)