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:
- La librerÃa JQuery
- 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.
- También necesitaremos una hoja de estilo que defina la apariencia de la caja de texto o elemento emergente.
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.
Problemas y Soluciones
A continuación relaciono los problemas con los que me encontré llevando a la práctica los ejemplos de este artÃculo y la forma en que pude solucionarlos. Me parece una buena idea incluir este apartado, pues la mayorÃa de las veces cometemos errores que suelen ser comunes y a pesar de ser pequeños generan auténticos dolores de cabeza.
- En el Ej.1 no aparecÃa el tooltip. Solución: La etiqueta anchor del enlace debe tener la clase tooltip y no la habÃa incluÃdo: <a class=»tooltip» title=»Ejemplo de…
- En el Ej..2 no aparecÃan las imágenes. Solución: No tenÃa bien escrita la ruta a las imagenes, que es diferente en mi caso.
- HabÃa un conflicto entre librerÃas JQuery debido a que estaba cargando dos archivos jquery.js distintos. La plantilla que utilizo carga esta librerÃa automáticamente desde wp-includes / js / jquery /jquery.js y en algunos casos habrá que sustituirla por una versión más reciente.
ENLACES RELACIONADOS
Alen Grakalic (http://cssglobe.com)
En cssglobe puedes ver el artÃculo original en inglés y descargar los archivos de ejemplo. Espero que hayas disfrutado y que este artÃculo haya resultado de utilidad.
Mostrar / Ocultar el Código
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();
});