Cuadro explicativo

[Maycol]

Hola
Quisiera hacer un cuadro explicativo "flotante" que se muestre al pasar el ratón por encima de un <td>, como podria hacerlo?
Si no me he explicado bien decidmelo e intentare explicarlo mejor .

Venga, gracias.

[cesar_san]

Usa esto, esta buenisimo y es ideal para aplicaciones con BD:


<!-- Este script va en el head, puedes personalizar los atributos de la caja flotante -->

<SCRIPT>
if (!document.layers&&!document.all)
event="test"
function showtip2(e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=text
document.all.tooltip2.style.pixelLeft=event.client X+document.body.scrollLeft-90
document.all.tooltip2.style.pixelTop=event.clientY +document.body.scrollTop+1
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write(te xt)
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}

</SCRIPT>

<!-- FIN -->


<!-- En cualquier parte del body -->

<DIV id=tooltip2
style="BACKGROUND-COLOR: lightyellow; CLIP: rect(0px 210px 160px 0px); Position:absolute ; VISIBILITY: hidden; border=1;WIDTH: 150px ; border-bottom: 1px solid #999; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; padding: 0 1px;">
</DIV>

<!-- FIN -->

<!-- Esto va en el evento -->

<a onmouseout=hidetip2()
onmouseover="showtip2(event,'<font size=2pt color=000000> EL TEXTO QUE QUIERES QUE SE <BR> MUESTRE, TAMBIEN LO PUEDES REMPLAZAR<BR> POR ALGUNA VARIABLE </font>')"</a>

<!-- FIN -->

Espero q te sirva, avisame si te resulto..... SUERTE..

Cesar

[Maycol]

hey muchas gracias es perfecto ;)

[Maycol]

ahora tengo un problemilla,es script funciona perfecto pero los <select> se ponen por encima del tooltip le tapa, habria alguna forma de que el <select> quedara por debajo?

Gracias

[JavierB]

Hola, Maycol.

Creo que esa es una de las preguntas más frecuentes en el Foro (hasta ahora sin respuesta) El día que alguien lo consiga le harán una estatua virtual.

Lo que puedes hacer es ocultar el select cuando se necesario:

Este es tu select: <select id="sel">

function showtip2(e,text){
document.getElementById("sel").style.visibility="h idden";

function hidetip2(){
document.getElementById("sel").style.visibility="v isible";

Espero que te ayude. Saludos,

[Maycol]

gracias JavierB, es una alternativa :).

Ahora tengo un problema el código no me funciona en Mozilla y quiera saber si podria hacer algun cambio para que funcione tanto en Mozilla como en IE, el código lo tengo asi(lo modifique algo):

Código PHP:

  <SCRIPT> 
if (!document.layers&&!document.all) 
event="test" 
function showtip2(e,text,datos){ 
document.all.eventos.innerHTML=datos; 
document.getElementById("eventos").style.visibility="visible"; 
document.getElementById("sel").style.visibility="hidden"; 
document.getElementById("sel2").style.visibility="hidden"; 
document.getElementById("sel3").style.visibility="hidden"; 
if (document.all&&document.readyState=="complete"){ 
document.all.tooltip2.innerHTML=text 
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+13 
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop-10 
document.all.tooltip2.style.visibility="visible" 
} 
 
else if (document.layers){ 
document.tooltip2.document.nstip.document.write(text) 
document.tooltip2.document.nstip.document.close() 
document.tooltip2.document.nstip.left=0 
currentscroll=setInterval("scrolltip()",100) 
document.tooltip2.left=e.pageX+20 
document.tooltip2.top=e.pageY+10 
document.tooltip2.visibility="show" 
} 
} 
function hidetip2(){ 
document.getElementById("eventos").style.visibility="hidden"; 
document.getElementById("sel").style.visibility="visible"; 
document.getElementById("sel2").style.visibility="visible"; 
document.getElementById("sel3").style.visibility="visible"; 
if (document.all) 
document.all.tooltip2.style.visibility="hidden" 
else if (document.layers){ 
clearInterval(currentscroll) 
document.tooltip2.visibility="hidden" 
} 
} 
 
function scrolltip(){ 
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width) 
document.tooltip2.document.nstip.left-=5 
else 
document.tooltip2.document.nstip.left=150 
} 
</SCRIPT>  
  

Venga a ver si me podeis hechar un cable en eso del mozilla

[Maycol]

hey nadie me puede ayudar en eso del mozilla, venga ;)