SummArg | Cursos y recursos para webmasters

25/01/2011

Tooltips a puro CSS3

Nuevamente horaciobella comparte con la comunidad un recurso muy útil realizado exclusivamente en CSS3. Se trata de tooltips que pueden aplicarse sobre imagenes o texto, y que pueden contener imagenes, texto, links, etc. Para implementarlo en cualquier website, primero debemos descargar el archivo .css de la página del autor y linkearlo a nuestro documento entre etiquetas <head>.

<link rel="stylesheet" href="tooltips.css" type="text/css" media="screen" />

Para utilizar las etiquetas, debemos realizar el siguiente marcado:

<a href="#">
	Lorem ipsum <!-- contenido del link -->
	<span class="tooltip"> <!-- Inicia el tooltip -->
		<span></span> <!-- esto es para el triángulo, sólo cosmético -->
		Lorem ipsum dolor sit amet <!-- contenido del link -->
	</span> <!-- fin del tooltip -->
</a>

Funciona bien en las últimas versiones de todos los navegadores populares.

Demo | Descarga

Dejar un comentario