UniTip: Más tooltips

UniTip es otro de esos scripts para mostrar tooltips al pasar el puntero del ratón sobre deteminados enlaces.

Es muy liviana y utiliza CSS para crear un fondo con imágenes así que es bastante sencillo reemplazarlas por imágenes personales sin necesidad de modificar códigos (las que trae por defecto son aptas para sitios con fondos claros):

En principio, funciona bien en cualquier navegador y podemos descargala desde este ZIP . Allí encontraremos el archivo unitip.js que es el único necesario y que podemos alojar en un servidor externo y luego insertarlo antes de </head> de este modo:

<script type="text/javascript" src="URL_unitip.js"></script>

O bien abrirlo con el block de notas y luego, copiar y pegar su contenido también antes de </head> pero, de este modo:

<script type='text/javascript'>
//<![CDATA[

... aqui pegamos el contenido del archivo ...

//]]>
</script>

Lo que nos faltaria es el CSS que es mejor agregarlo a nuestra plantilla inmediatamente después del script:

<style type='text/css'>
#unitip {
  display: none;
  position: absolute;
  top: -1000px;
  z-index: 1000;
  /* podemos establece la fuente y el color de los textos */
  color: #234;
  font-family: Tahoma;
  font-size: 11px;
}
#unitippoint, #unitipmid, #unitipcap {
  display: block;
  left: 0px;
  position: relative;
  top: 0px; 
  width: 145px;
}
#unitippoint { 
  background: url(URL_tippoint.png) no-repeat; 
  height: 19px; 
  overflow: hidden; 
}
#unitipmid { 
  background: url(URL_tipmid.png) repeat; 
  height: auto; 
  padding: 5px 15px;
  width: 115px;
}
#unitipcap { 
  background: url(URL_tipcap.png) no-repeat; 
  height: 7px; 
  overflow: hidden; 
}
</style>

Ese modelo corresponde al ejemplo para fondos claros y las imágenes ya están alojadas en ImageShack. Basta editarlas, realojarlas y cambiar las URLs para utilizar otras.

El mismo script es configurable. Así, por defecto, se puede aplicar a cualquier etiqueta de enlace (A) o imagen (IMG) pero, podemos editar el script y cambiar eso. El original dice así:

var uniTipTag = "a,img"; //Which tag do you want to uniTip-ize? Keep it lowercase. No spaces around commas.//

y podríamos agregar otras etiquetas de este modo:

var uniTipTag = "a,img,p,span";

Lo mismo ocurre con la posición relativa donde se mostrará el tooltip:

var uniTipX = 0; // X offset from cursor//
var uniTipY = 15; // Y offset from cursor//

Lo aplicamos a una etiqueta indicando una clase especial class="tip" y colocamos lo que queremos mostrar, en el atributo title. Por ejemplo:

<a class="tip" title="Lo que veremos en el tooltip" href="una_URL"> ENLACE </a> 

El nombre de la clase, también puede cambiarse, editando el script:

var uniTipClass = "tip";

También es posible crear contenido que contenga HTML. Para eso, lo más probable es que debamos cambiar los caracteres de apertura y cierre de las etiquetas por sus correspondientes entities. Es decir, en lugar de < escribimos &lt; y en lugar de > escribimos &gt;. Por ejemplo:

<a class="tip" title="la primera línea del tooltip ...&lt;br/&gt;y la segunda línea del tooltip ..." href="una_URL"> ENLACE </a> 

Un ejemplo concreto es el que puede verse en los diferentes enlaces de esta entrada.