Cómo crear un tooltip usando jQuery y CSS

Los amigos de CSS-Tricks (en específico Chris Coyier) en uno de sus tutoriales han creado un pequeño plugin para poder crear tooltips de una forma muy fácil, tan fácil que basta sólo mencionar unas tres líneas de código para poder tener la función ya trabajando.

Hoy vamos a ver entonces como crear un tooltip usando jQuery y CSS, tanto como copiar y pegar las librerías y ya, tenemos listo nuestro tooltip.

Dificultad del tutorial: Básico
Página de descarga de archivos
Demo del tutorial

HTML

Para este tutorial lo único que necesitamos en una capa donde contendremos todo el texto, y un link que tendrá una pequeña descripción con el uso de la propiedad “title” donde pondremos el texto que queremos que aparezca una vez que el cursor este sobre el link.

CSS

Aquí viene una parte muy sencilla, ya que en cuanto a CSS ya está configurado todo, ya lo único que tenemos que hacer es copiar y pegar el archivo css.

jQuery

Aquí hay dos cosas que hacer, la primera es incluir obviamente el archivo con el plugin para que funcione el tooltip.

Y luego que ya tenemos esto basta con declarar a qué capa se le va a aplicar el efecto para que cada link tenga su tooltip, así que hay que asegurarse de que tengan el mismo nombre