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!!!!