Tooltip con JQuery

Todo lo que a los ojos del usuario es sencillo y funcional: es bueno. De manera que practiquemos un poco más con las posibilidades que nos ofrece la librería JQuery para mejorar y optimizar la presentación del contenido de nuestra web.Un tooltip es ese pequeño letrero con fondo amarillo que nos muestra información adicional cuando situamos el puntero sobre un determinado enlace. Partiendo de ahí ha evolucioado hasta el punto en que ya podemos cargar contenidos mucho más complejos.  Aquí van unos cuantos ejemplos de cómo se pueden combinar el código javascript -especialmente la librería JQuery- y las Hojas de Estilo (CSS) para conseguir estos resultados.

Ej. 1 : Tooltip de Texto

Cuando sitúe el puntero del ratón sobre este enlace, aparecerá un pequeño texto de información. Al mover el puntero, la caja de texto se moverá también mientras nos encontremos dentro de los límites del enlace, y desaparecerá cuando nos alejemos. Para conseguir este resultado necesitamos:

1. La librería JQuery
2. Una función JavaScript que permita añadir un nuevo elemento html a la página y otra  que calcule la posición en la que estará situado el puntero del ratón. Ambas en el fichero tooltip.js que más abajo se incluye con las anotaciones del autor.
3. También necesitaremos una hoja de estilo que defina la apariencia de la caja de texto o elemento emergente.

Ej. 2: Tooltip con Imágenes

Galería (sin Leyenda)

• 
• 
• 
• 

Galería (con Leyenda)

• 
• 
• 
• 

Ejemplo 3: Tooltip con Imágenes y texto

Pasa el puntero por el siguiente enlace de Plantillas para obtener una vista previa de la imagen. Y en el enlace de PCPolis encontrarás la misma imagen que incluye un texto explicativo.

Estilos CSS

Nota. En el ejemplo original están incluídos en el propio archivo html. Los que incluyo tienen algunas modificaciones necesarias para wordpress.

/* ESTILOS PARA TOOLTIP

Ejemplo 1 */

#emergente1 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente1 a{
text-decoration:none;
color:#f30;
}

#emergente1 a:hover {
background-color: transparent;
}

#emergente1 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente1 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#tooltip{
position:absolute;
border:1px solid #CCCCCC;
padding:2px 5px;
color:#FFFFFF;
display:none;
background-color: #2d83d5;
font-weight: bold;
}

#emergente a:hover {
background-color: transparent;
}

/* Ejemplo 2 */

#emergente2 {
display:block;
overflow:hidden;
}

#emergente2 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente2 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente2 a{
text-decoration:none;
color:#f30;
}

#emergente2 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente2 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente2 img    {
border: 1px solid #CCCCCC;
margin-bottom:7px;
}

#emergente2 ul,li{
margin:0!important;
padding:0;
}

#emergente2 li{
list-style:none;
float:left;
display:inline;
margin-right:0px;
}

#preview{
position:absolute;
border:1px solid #ccc;
padding:5px;
display:none;
color:#666666;
background-color: #fff;
text-align: center;
line-height: 2em;
}

#emergente2 a:hover {
background-color: transparent;
}

/* Ejemplo 3  */

#emergente3 h1{
font-size:180%;
font-weight:normal;
color:#555;
}

#emergente3 h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}

#emergente3 a{
text-decoration:none;
color:#f30;
}

#emergente3 p{
clear:both;
margin:0;
padding:.5em 0;
}

#emergente3 pre{
display:block;
font:100% «Courier New», Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}

#emergente3 img{border:none;}

#emergente3 ul,li{
margin:0;
padding:0;
}

#emergente3 li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}

#screenshot {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
line-height:2em;
text-align:center;
}

#emergente3 a:hover {
background-color: transparent;
}

Arvhivo JavaScript

tooltips.js

/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.tooltip = function(){
/* CONFIG */
xOffset = -18;
yOffset = 0;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$(«a.tooltip»).hover(function(e){
this.t = this.title;
this.title = «»;
$(«body»).append(«<p id=’tooltip’>»+ this.t +»</p>»);
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#tooltip»).remove();
});
$(«a.tooltip»).mousemove(function(e){
$(«#tooltip»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
tooltip();
});

/*
* Image preview script
*/

this.imagePreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/*     END CONFIG NOTAS:
hover es un gestor de evento para cuando se pasa el ratón sobre un objeto
hover( over, out )
*/
$(«a.preview»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’preview’><img src='»+ this.href +»‘ alt=’Image preview’ />»+ c +»</p>»);
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#preview»).remove();
});
$(«a.preview»).mousemove(function(e){
$(«#preview»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
imagePreview();
});

/*
* Url preview script
*/

this.screenshotPreview = function(){
/* CONFIG */

xOffset = -18;
yOffset = 0;

// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result

/* END CONFIG */
$(«a.screenshot»).hover(function(e){
this.t = this.title;
this.title = «»;
var c = (this.t != «») ? «<br/>» + this.t : «»;
$(«body»).append(«<p id=’screenshot’><img src='»+ this.rel +»‘ alt=’url preview’ />»+ c +»</p>»);
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»)
.fadeIn(«fast»);
},
function(){
this.title = this.t;
$(«#screenshot»).remove();
});
$(«a.screenshot»).mousemove(function(e){
$(«#screenshot»)
.css(«top»,(e.pageY – xOffset) + «px»)
.css(«left»,(e.pageX + yOffset) + «px»);
});
};

// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});