Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
Vamos a ver cómo hacer con CSS que aparezcan tooltips y popups de imáganes cuando ponemos el ratón sobre una determinada palabra, más o menos como en las dos siguientes:
tooltipEsto es el tooltip
imágen
.
Pos supuesto, cómo no y para variar, no funciona en Internet Explorer para versiones menores que la 7
Lo primero elegimos un par de tags html que podamos anidar uno dentro de otro y que nos servirán para meter el texto sobre el que queremos tooltip y el tooltip o imágen en sí mismo. Yo he elegido para el ejemplo estos
<span class="texto">tooltip<em>Esto
es el tooltip</em></span>
<span class="texto">imágen<img src="../../iconos/cara.gif"
alt="careto tooltip"></img></span>
Es decir, el texto va dentro de una etiqueta <span> y dentro de ella he metido una etiqueta <em> o <img>, según lo que quiero que se muestre al poner el ratón encima. He elegido "texto" como nombre de la clase CSS para mostrar el tooltip.
Lo primero que tenemos que hacer con CSS es que el tooltip o imágen queden ocultos. Para ello se puede usar esto
.texto > em, .texto > img
{
display:none;
}
Ahora debemos darle una posición adecuada. Usaremos position:absolute, pero para que la posición no sea respecto a la pantalla completa, debemos dar una posición tambien a la etiqueta padre (<span> en este caso). Al tener posición la etiqueta padre, las coordenadas de la etiqueta hija serán respecto a la posición de la padre. Para que la etiqueta padre salga en su sitio, basta con darle position:relative sin ningún tipo de coordenadas
.texto
{
position:relative;
}
.texto > em, .texto > img
{
display:none;
position:absolute;
top:-1em;
left:2em;
/* Un poco de colorido */
background:yellow;
border:1px solid black;
width:100px;
}
Ahora sólo nos queda hacer que cuando se ponga el ratón encima, se visualice el texto o la imágen.
.texto:hover > em, .texto:hover > img
{
display:block;
}
Nuevamente, este es el motivo por el que Internet Explorer no funciona, sólo trata los hover con etiquetas <a>.