Tutorial: Crear tooltips con CSS3

En internet hay miles de scripts (especialmente para jQuery) que te permiten crear tooltips excelentes, pero... para que depender de javascript?

Usando solamente CSS3 puedes crear unos simples y efectivos aunque, lamentablemente, no tengan las mismas funcionalidades (por ahora).

Si estás convencido que javascript no es necesario para unos tooltips, sigue leyendo la entrada...

Enlaces (bastante) útiles

Paso 1: Crear una página

Primero creemos una página base de solo 2 archivos:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Crear tooltips con CSS3 &laquo; Teleportz</title>
	<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
</head>
<body>
	
	<div class="content">

		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
		ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
		tempor sit amet, ante. Donec eu <a href="http://google.com" title="Visitar Google">libero</a>
		sit amet quam egestas semper. <a href="http://teleportz.com.ar" title="Teleportz">Aenean</a> 
		ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		
		<p>Pellentesque <a href="http://teleportz.com.ar">habitant morbi</a> <strong>(no title)</strong>
		tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		
	</div><!-- .content -->

</body>
</html>

assets/css/style.css

/* ========== BODY ========== */

body {
	background: #ddd;
	line-height: 1.7;
	font-size: 14px;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

/* ========== COMMON ========== */

a {
	color: #007ccf;
}

a:hover {
	color: #006699;
	text-decoration: none;
}

/* ========== CONTENT ========== */

.content {
	width: 500px;
	border: 3px solid #ccc;
	background: #fff;
	padding: 10px;
	margin: 10px auto;
}

Si crearon bien los archivos, el resultado sería este:

Paso 2: Crear el tooltip

Agreguen el siguiente contenido al final del archivo CSS. No explico el código porque es muy sencillo, aunque deben conocer el pseudo elemento ::before (Información).

a {
	position: relative;
}

a[title]:hover::before {
	content: attr(title);
	position: absolute;
	white-space: nowrap;
	top: -40px;
}

Con solo eso nuestro tooltip ya debe funcionar! Eso sí, no queda muy lindo que digamos... pero eso es solucionable!

Paso 3: Agregarle estilo

Editen el archivo CSS y reemplacen la propiedad a[title]:hover::before con lo siguiente:

a[title]:hover::before {
	content: attr(title);
	position: absolute;
	white-space: nowrap;
	top: -40px;
	
	background: rgba(254, 255, 136, 0.9);
	color: #000;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #cccc00;
	
	padding: 3px 10px;
}

Mucho mas copado, no?? Y solo utilizamos 20 lineas!

Extra, extra!

Aunque este script sea ideales para los enlaces, sirve para cualquier elemento, como pueden ver en la demo (#2). El código utilizado es el siguiente:

HTML

<ul>
	<li>
		Espacio web
		<div class="tooltip" data-tooltip="Espacio total disponible para archivos y mails">
			<img src="assets/img/help.png" alt="Info" />
		</div>
	</li>
	<li>
		Transferencia
		<div class="tooltip" data-tooltip="Transferencia total. (Muy completo! No?)">
			<img src="assets/img/help.png" alt="Info" />
		</div>
	</li> 
	<li>
		Dominios
		<div class="tooltip" data-tooltip="Dominios! Si!">
			<img src="assets/img/help.png" alt="Info" />
		</div>
	</li>
</ul>

CSS

li {
	width: 150px;
}

.tooltip {
	position: relative;
	float: right;
}

.tooltip:hover::before {
	content: attr(data-tooltip);
	position: absolute;
	top: -40px;
	white-space: nowrap;
	
	background: rgba(254, 255, 136, 0.9);
	color: #000;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 3px solid #cccc00;
	
	padding: 3px 10px;
}

El resultado debería ser el siguiente:

Todo muy lindo... no? Cualquier duda... comments!