Tooltips con JavaScript

Los tooltips son mensajes creados con la intención de añadir información a determinados elementos como pueden ser enlaces de texto o bien imágenes. Estos mensajes son accionados mediante la acción del usuario, ya sea por medio de un evento del tipo click o mouseover.

En la mayoría de los casos estos mensajes son ingresados utilizando etiquetas como alt o title, sin embargo existe otra posibilidad, y es la que explota muy bien esta biblioteca JavaScript, y es utilizando la etiqueta data-. Esto supone una mejora ya que permite homogeneizar la forma de ingresar la información independientemente del elemento utilizado para accionar los tooltips.

Opentip es una biblioteca open source, totalmente gratuita y que viene desde su descarga con distintos estilos disponibles.

Cómo crear Tooltips con JavaScript

Agregamos las bibliotecas y hojas de estilo necesarias a nuestro proyecto:

<script src="path/to/adapter-jquery.js"></script>
<link href="path/to/opentip.css" rel="stylesheet" type="text/css" />

Este adaptador que se incluye puede cambiarse fácilmente a otros framework, entre ellos podemos destacar: jQuery y Prototype. También podemos optar por utilizar la solución standalone que no requiere de ninguna dependencia adicional.

Ahora podemos decidir por dos soluciones distintas. La primera es inicializar los tooltips directamente desde el elemento utilizando las etiquetas data.

<div data-ot="Shown after 2 seconds" data-ot-delay="2"></div>

La segunda opción es más clásica y consiste en inicializar el plugin de la manera tradicional.

// ejemplo sin utilizar framework:
new Opentip("#my-element", "Shown after 2 seconds", { delay: 2 });
// podemos iniciarlo de esta forma si utilizamos un framework:
$("#my-element").opentip("Shown after 2 seconds", { delay: 2 });

Un detalle importante es que esta biblioteca admite distintos estilos de forma simultánea, algo que no hacen otras bibliotecas y que nos da cierto nivel de flexibilidad para lograr un diseño más atractivo y funcional.

La compatibilidad con los distintos navegadores es muy buena, soporta: Chrome, Firefox, Opera, Safari e Internet Explorer 7+.

Web: Opentip