tooltip con fade

Pentaxeros · #1 (**permalink**) 03/06/2013, 12:22

Hola, me he creado un Tool tip que venia de CSS, que me habia hecho, y lo tengo en javascrip, y me funciona, pero quiero hacerlo con jquery, para dejarlo mas "bonito" y que aparezca y desaparezca con un efecto fade... etc.
En la web voy a tener al menos 15 a 20 tooltips en diferentes sitios y con diferentes contenidos.
El tooltip es el div 01busca
donde 01busca1 es el triangulo azul y 01busca2 es el recuadro que contiene el texto.

Es de esta forma:

Código HTML:

<div class="spritenuevo-busca" onmouseover="vertooltip('01busca')" onmouseout="vertooltip('01busca')">    
        <div id="01busca" style="position:relative;left:50%;display:none;">
            <div id="01busca1" class="tooltip2cabe"></div>
            <div id="01busca2" class="tooltip2">Buscador</div>
        </div>
 </div>

y luego tengo la función en javascript:

Código HTML:

function vertooltip(cual)
{
	var div = document.getElementById(cual);
	var div2 = document.getElementById(cual+'2');
	if (div.style.display == 'none')
	div.style.display =''; else div.style.display='none';
	var ancho=div2.offsetWidth;
	var desplaza=  Math.round(ancho / 2);
	if (desplaza>0) div.style.marginLeft='-'+(desplaza)+'px';
}

la función javascript, lo que hace es mostrarlo y ocultarlo ademas de centrarlo en función del ancho, para que siempre se vea centrado, ya que desde CSS era imposible centrarlo como ya he visto aqui en este otro POST (http://www.forosdelweb.com/f53/centr...p-div-1054798/)

Me ayudáis a hacerlo con JQUERY y que ademas tenga fader!

He estado probando cosa que hay hechas por la red, pero me daba incompatibilidades con todo lo que ya tengo hecho en mi pagina. Por lo que he decidido hacer lo yo con lo que necesito que es esto simplemente.

GRACIAS!!!!

maycolalvarez · #2 (**permalink**) 03/06/2013, 12:47

pero jQuery ya tiene varios plugin jQuery ToolTip

http://speckyboy.com/2009/09/16/25-u...and-tutorials/

Pentaxeros · #3 (**permalink**) 03/06/2013, 13:00

Esa página ya la he visto, y los que me gustan dan incompatibilidad con mi página actual, y prefiero cocinar uno que haga solo lo que yo quiero.

Me ayudáis con el código?

Gracias

emprear · #4 (**permalink**) 03/06/2013, 17:23

Cita:

Iniciado por Pentaxeros

Esa página ya la he visto, y los que me gustan dan incompatibilidad con mi página actual, y prefiero cocinar uno que haga solo lo que yo quiero.

Me ayudáis con el código?

Gracias

Bueno, tooltips con jquery y fade debe de haber visto muchos, que te traigan incompatibilidad, debe de haber de todo, ahora que para hacerlo más bonito recurrir a jQuery un poco exagerado, te dejo uno muy sencillito con css y js sin jQuery para el fade

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Tooltip + fade noJquery</title>
<style type="text/css">
/*<![CDATA[*/
/* Tooltip con css */
a.tooltip{
outline:none;
text-decoration:none;
}
a.tooltip span{
z-index:10;
display:none;
padding:10px 16px; 
margin-top:10px;
margin-left:28px;
width:140px;
line-height:16px;
font-size: 14px;
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #000; 
-webkit-box-shadow: 5px 5px 8px #000;
box-shadow: 5px 5px 8px #000;
opacity: 0;
}
a.tooltip:hover span{
display:inline;
position:absolute;
color:#111;
border:1px solid #404A5B;
background:#fffAF0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
// fade para el tooltip
var tiempo;
function micapa(lacapa){var fade=0,micapa=lacapa.style,ms=(micapa.opacity==0)?0:1;tiempo=setInterval(Fade,10);
function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="alpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(tiempo)}};
function limpiarEfecto(s){clearInterval(tiempo);s.style.opacity=0;}
// fin fade
//]]>
</script>
</head>
<body>
<p>
<a href="#" class="tooltip" onmouseover="micapa(this.childNodes[1]);" onmouseout="limpiarEfecto(childNodes[1]);">
    El link uno<span>Tooltip para link uno</span>
    </a>
<br />
<a href="#" class="tooltip" onmouseover="micapa(this.childNodes[1]);" onmouseout="limpiarEfecto(childNodes[1]);">
    El link dos<span>Tooltip para link dos</span>
    </a>
</p>
</body>
</html>

Obviamente es adaptable a eso de "hacer solo lo que necesito"

Saludos

Pentaxeros · #5 (**permalink**) 04/06/2013, 10:58

Gracias! y GRACIAS!!! , lo he adaptado a mi pagina, y funciona "casi" bien.

Aparece con fade cuando pongo el raton encima, pero si muevo el raton sobre el DIV que tiene la función onmouseover, el tooltip se esconde y vuelve a aparecer... es como un parpadeo...

La pagina donde lo he instalado, unicamente en el primer boton, el de buscar que esta arriba en el centro es esta:
http://es.woow360.com/index2.php

vamos que si pongo el raton y no lo muevo, aparece bien, pero si muevo el raton sobre el div, empieza a hacer parpadeos "extraños"...

Saludos!!!

Pentaxeros · #6 (**permalink**) 04/06/2013, 11:20

Por cierto en IE7, me da error y no funciona...
Da error en
s.style.opacity=0;
y en
micapa.opacity==0

Alguna idea?

Gracias!!!

emprear · #7 (**permalink**) 04/06/2013, 11:40

Como te señalé, todo esto es "adaptable", asi haciéndolo a la ligera, mirá este ejemplo

http://foros.emprear.com/javascript/...ade_nojq1.html

hay que jugar un poco con los margenes del <span> para que no se sobrepongan con los del <a>
Con respecto a la opacidad, es un poco más complejo para hacerlo trabajar en IE7/8, mirá esta demo
http://foros.emprear.com/css/opacity.html

Para serte sincero, nunca hice las tres cosas juntas, tooltip+fade+ie7/8, las herramientas ahi están, habrá que experimentar un poco más para hacerlas funcionar, y si no, lo que señalo en un principio, algún plugin de jQuery

SAludos