CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

Los bocadillos de texto (tooltip) son un recurso muy interesante a la hora de mostrar textos informativos. En esta entrada aprenderemos a crearlos usando HTML, CSS y 3 imágenes. Estos bloques de información quedarán ocultos y únicamente se mostrarán al mover el ratón encima de un enlace.

Antes que nada es necesario mostrar las imágenes con las que ilustraremos y daremos forma a nuestro bloque oculto. Podéis descargarlas haciendo click aquí.

Código CSS

Daremos estilo a los enlaces junto con la etiqueta <span>. Esta etiqueta, es la que nos ayudará, mediante el atributo :hover, a mostrar el bloque de información cuando nos posicionemos encima de un enlace. Cabe destacar la línea display: block; para darle una disposición de bloque al contenido oculto.

div#mitexto{width: 500px; margin:0 auto}

a.tt
a.tt span{ display: none; }

/*background:; ie hack*/
a.tt:hover{ z-index:25; color: #aaaaff; }
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
	padding: 15px 0 0 0;
	width:200px;
	color: #993300;
    text-align: center;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* altura del bloque variable */
	display: block;
	padding: 0 8px;
	background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

Código HTML

El contenedor tiene asignado un ancho específico, aunque esto es opcional y puede ser eliminado. Dentro del enlace se insertan varias etiquetas con las que conseguiremos asignarle una forma y estructura al tooltip por medio de imágenes. Se añade una para la parte superior, otra para el fondo, el cual varía su altura según la cantidad de texto que haya dentro del bocadillo de texto (tooltip), y otra para la parte inferior, anidadas unas con otras.

<div id="mitexto">
		<h1>Encabezado 1</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi enim, tincidunt vitae pharetra sed, consequat nec velit.
 <a class="tt" href="#">MI ENLACE<span class="tooltip"><span class="middle">Felicidades, acabas de encontrar un contenido oculto</span><span class="bottom"></span></span></a>.
 </p>
	</div>

Estandarización

CSS 2.1 válido.

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Dejadme recordaros que podéis ver esta otra entrada sobre tooltips (bocadillos de texto) a los que no les hemos dado la opción de ocultación.

Vía | Trentrichardson.com