Esta demo no funcionará. Para verlo funcionar ir a la demo (link más abajo). No obstante recomiendo los tooltips con CSS.

Hoy estaba mirando el nuevo diseño del blog cuando se me ocurrió una idea que, aunque no sé si la implementaré definitivamente, puede ser muy útil.

Es un tooltip:

AquíSí, esto es un tooltip

Hay varios plugins para esto, pero ninguno me convenció, así que hice una función básica para hacer cosas como la que habéis visto.

Para usarlo hay que tener instalado jQuery, como supondréis, y luego pegar entre etiquetas script el código que elijáis. He hecho dos versiones:

El html

Es un contenedor (que puede ser un link, un span, etc…) con un div/span con clase “tooltip” dentro, que aparecerá cuando paséis el ratón por encima. Un ejemplo:

<div>Texto que se veerá<span class="tooltip">contenido que aparecerá</span></div>

El CSS

No es necesario para nada más que la personalización. Aún así, recomiendo ocultarlo con display:none; por si el Javascript tarda en cargar.

Os dejo el que he usado yo aquí:


.tooltip{
display:none;
background:#f4f4f4;
border-radius:3px;
box-shadow:0 0 3px rgba(0,0,0,.4);
border:3px solid #369;
color:#2c2c2c;
text-decoration:none;
padding:5px;
}

Versión básica

En ésta sólo podemos hacerlos hacia arriba y centrados, pero claro, pesa menos. Aquí tenéis el código comentado:

<script>
jQuery(function($){
$('.tooltip').hide();
$(':has(".tooltip")').hover(
//Cuando entra el ratón
function(){
var tooltipcontainer=$(this);//Donde estará el tooltip
var tooltip=$(this).children('.tooltip');//El tooltip
if(tooltipcontainer.parent().css('position')=='static'){tooltipcontainer.parent().css('position','relative')};
//Ponemos la altura automática para calcularla
//No se ve porque el la opacidad está a 0
tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute'});
//Calculamos la altura
var tooltipheight=tooltip.height();
//Lo posicionamos verticalmente, de tal manera que no importen padding y margin
var bottom=tooltipcontainer.parent().outerHeight()-tooltipcontainer.position().top-parseInt(tooltipcontainer.css('margin-top'),10)+separararriba;
//Ahora lo posicionamos horizontalmente. Ahí estará centrado.
var left=tooltipcontainer.position().left+parseInt(tooltipcontainer.css('marginLeft'),10)+(tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2);
//Lo configuramos para que no se vea, para animar altura y opacidad
tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
//Animamos
tooltip.animate({opacity:'1', height:tooltipheight});
},//Cuando sale el ratón
function(){
//Definimos otra vez las variables que usamos y lo animamos
var tooltipcontainer=$(this);
var tooltip=$(this).children('.tooltip');
tooltip.fadeOut("slow");
});
});
</script>

Versión avanzada

Ésta sólo es una serie de condicionantes para variar la posición. Podéis cambiarla poniendo distintas clases. Por ejemplo: Si el tooltip lo escribís así <span>Texto que se ve<span class="tooltip abajo derecha">...Lo que va dentro...</span></span> obtendréis:

Ésto…Lo que va dentro…

Si queréis información sobre esto podéis ver el código de la demo.

Actualización: No me acordaba ya de este post, pero realicé una actualización importante y no la publiqué: está aquí abajo

<script type="text/javascript">
$('.tooltip').hide();
$(function(){
$('.tooltip').parent().hover(
//Cuando entra el ratón
function(){
var separararriba = separarabajo = separarderecha = separarizquierda = 3,
tooltipcontainer = $(this),
tooltip = tooltipcontainer.children('.tooltip'),
tooltipheight, bottom,
top = tooltipcontainer.position().top+parseInt(tooltipcontainer.css('margin-top'),10),
left = tooltipcontainer.position().left+parseInt(tooltipcontainer.css('margin-left'),10);

tooltip.css({'display':'block','opacity':0,'height':'auto','position':'absolute','margin':0});

tooltipheight = tooltip.height();

if(tooltipcontainer.parent().css('position') === 'static'){tooltipcontainer.parent().css('position','relative');};

if (tooltip.hasClass('derecha')){
left += tooltipcontainer.outerWidth() + separarderecha;
} else if (tooltip.hasClass('izquierda')){
left -= tooltip.outerWidth() + separarizquierda;
} else {
left += (tooltipcontainer.outerWidth()/2)-(tooltip.outerWidth()/2)
}


if(tooltip.hasClass('abajo')){
top += tooltipcontainer.outerHeight()+separarabajo;
}else if (tooltip.hasClass('centro')){
top += tooltipcontainer.outerHeight()/2-tooltip.outerHeight()/2;
} else {
bottom = tooltipcontainer.parent().outerHeight() - tooltipcontainer.position().top - parseInt(tooltipcontainer.css('margin-top'),10) + separararriba;
}

if( bottom ){
tooltip.css({'height':'0px','opacity':'0','bottom':bottom,'left':left});
}else{
tooltip.css({'height':'0px','opacity':'0','top':top,'left':left});
}
//Animamos
tooltip.animate({opacity:'1', height:tooltipheight});
},
//Cuando sale el ratón
function(){
//Definimos otra vez las variables que usamos y lo animamos
var tooltip = $(this).children('.tooltip');
tooltip.fadeOut("slow");
}
);
});</script>

Demo y descarga

Nota: Al poner los tooltips arriba toma una posición relativa, así que da problemas en contenedores muy (extremadamente) pequeños. Tenedlo en cuenta, intentaré arreglarlo lo antes posible.

Actualizado!! El problema no era de eso, sino que los divs que podemos poner para, por ejemplo, centrarlos, tienen position:static, lo que impide al tooltip posicionarse correctamente. Solo añadí una línea:


if(tooltipcontainer.parent().css('position')=='static'){tooltipcontainer.parent().css('position','relative')};
Arriba centradoHola!Arriba derechaBuenas!Centro derechaHola!

16 pensamientos en “Tooltips con jQuery

  1. Imagen de JoseJose el dijo:

    Hola Emilio yo estoy tratando de hacer un tooltip pero todo eso esta dentro de un div y lo que quiero lograr es que el tooltip aparesca en imagenes, que el primer tooltip salga a la derecha pero el ultimo que estaria ya pegado al costado del div donde esta todo salga a la izquierda. eso es posible seria un tooltip como el de cuevana

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.