Lista de Datos con Informacion al Hacer OVER

[cmarrero]

hola todos...

quisiera saber si alguien me puede orientar...

Estoy Usando PHP y MySQL

Me conecto, consulto datos a una tabla por ejemplo clientes

y muestro solo el nombre y el Cuit por ejemplo de ese cliente...

y quiero que al pocisionarme sobre el cliente me salga un globito con la info completa de ese cliente...(Un globito flotante como de comentario pero con la informacion)
y que cuando deje de posicionar el mause encima simplemente desaparezca....

Alguien me puede ayudar con esto...

Gracias....

[the_web_saint]

un tooltip es lo que deseas tu!, esto te puede servir:

debes usar javascript, te lo colocare, pero en el archivo debes tener un div como este:

Código PHP:

  <div id="posicion" class="hint"></div><!-- Tooltip-->  
   

el javascript es este:

Código PHP:

  function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}

var browser = new Browser();

function initMovimiento(event, msg){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
} 
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
document.getElementById("posicion").innerHTML = "Arrastre para ordenar sus "+msg;
}

function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
//para cambiar el color de fondod de la tabla
function mOvr(obj, color)
{
    obj.style.background=color;
}  
   

en este caso se esta aplicando en una tabla pero tu lo puedes adaptar:

Código PHP:

  <script language="javascript">msg="productos";</script>
<script type="text/javascript" src="../js/tooltip.js"></script>
....................................
<table class="cont_tabla" onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event);" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">  
  

Lo que te ayudara a crear el efecto de tootltip tambn es el css.

Saludos

[GatorV]

Tema trasladado a Javascript.

[cmarrero]

pero muchisimas gracias por el aporte...

Bien, ahora tengo algunas dudas...

La idea es que el globo me muestre informacion distinta de cada cliente, supongo que tendria que enviar el id del cliente cuando me posiciono encima y que me devuelva la consulta SQL obviamente para cada fila...

Lo no se si con esto es posible... lo de que el div sea flotante y eso, seria tema aparte lo aria con CSS pero lo mas importante es que me muestre informacion de cada fila segundo en donde se posiciona...

Ademas otro temita, seria que la info me la muestre en el mismo lugar en donde estoy posicionado, es decir, el div se tiene que abrir de acuerdo a la fila que selecciona.... o algo asi...

Muchas gracias por ayudarme con esto... relamente lo necesitava...

[the_web_saint]

Con esto que te he dado, se genera un div flotante el cual se visualiza donde te posiciones, es decir en la posicion del ratón!.
Lo de la información de la DB, creo que lo mejor sería con ajax, por ejemplo.
Cuando te posicionas encima, llamas a una funcion javascript que cree el objeto ajax, envie el id a otra pagina y haga la consulta, luego lo que imprimes en ella lo devuelves al div en cuestion(el tooltip).
Si no sabes como hacerlo, en las faq´s de ajax hay muchos ejemplos de coo hacer consultas a la DB!
De todas formas, intentaré hacer algunas pruebas a ver si logro ayudarte con ese codigo compañero!

Saludos y suerte!

[cmarrero]

Claro, se me complica bastante el hecho de enviar y recivir la informacion al pasar sobre el cliente... de todas formas sigo haciendo pruebas...

Algo que hice fue lo siguiente....

Archivo JS
es largo pero lo pongo para que lo puedan copiar y pegar....

LO PONGO EN 2 PARTES POR QUE NO ME DEJA PONERLO TODO...

Código PHP:

  /* --- BoxOver --- 
/* --- v 2.1 17th June 2006 
By Oliver Bryant with help of Matthew Tagg 
http://boxover.swazz.org */ 
 
if (typeof document.attachEvent!='undefined') { 
   window.attachEvent('onload',init); 
   document.attachEvent('onmousemove',moveMouse); 
   document.attachEvent('onclick',checkMove); } 
else { 
   window.addEventListener('load',init,false); 
   document.addEventListener('mousemove',moveMouse,false); 
   document.addEventListener('click',checkMove,false); 
} 
 
var oDv=document.createElement("div"); 
var dvHdr=document.createElement("div"); 
var dvBdy=document.createElement("div"); 
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft; 
boxOpen=false; 
ox=10; 
oy=10; 
lockX=0; 
lockY=0; 
 
function init() { 
    oDv.appendChild(dvHdr); 
    oDv.appendChild(dvBdy); 
    oDv.style.position="absolute"; 
    oDv.style.visibility='hidden'; 
    document.body.appendChild(oDv);     
} 
 
function defHdrStyle() { 
    dvHdr.innerHTML='<img  style="vertical-align:middle"  src="info.gif">&nbsp;&nbsp;'+dvHdr.innerHTML; 
    dvHdr.style.fontWeight='bold'; 
    dvHdr.style.width='150px'; 
    dvHdr.style.fontFamily='arial'; 
    dvHdr.style.border='1px solid #A5CFE9'; 
    dvHdr.style.padding='3'; 
    dvHdr.style.fontSize='11'; 
    dvHdr.style.color='#4B7A98'; 
    dvHdr.style.background='#D5EBF9'; 
    dvHdr.style.filter='alpha(opacity=85)'; // IE 
    dvHdr.style.opacity='0.85'; // FF 
} 
 
function defBdyStyle() { 
    dvBdy.style.borderBottom='1px solid #A5CFE9'; 
    dvBdy.style.borderLeft='1px solid #A5CFE9'; 
    dvBdy.style.borderRight='1px solid #A5CFE9'; 
    dvBdy.style.width='150px'; 
    dvBdy.style.fontFamily='arial'; 
    dvBdy.style.fontSize='11'; 
    dvBdy.style.padding='3'; 
    dvBdy.style.color='#1B4966'; 
    dvBdy.style.background='#FFFFFF'; 
    dvBdy.style.filter='alpha(opacity=85)'; // IE 
    dvBdy.style.opacity='0.85'; // FF 
} 
 
function checkElemBO(txt) { 
if (!txt || typeof(txt) != 'string') return false; 
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1))  
   return true; 
else 
   return false; 
} 
 
function scanBO(curNode) { 
      if (checkElemBO(curNode.title)) { 
         curNode.boHDR=getParam('header',curNode.title); 
         curNode.boBDY=getParam('body',curNode.title); 
            curNode.boCSSBDY=getParam('cssbody',curNode.title);             
            curNode.boCSSHDR=getParam('cssheader',curNode.title); 
            curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false; 
            curNode.fixX=parseInt(getParam('fixedrelx',curNode.title)); 
            curNode.fixY=parseInt(getParam('fixedrely',curNode.title)); 
            curNode.absX=parseInt(getParam('fixedabsx',curNode.title)); 
            curNode.absY=parseInt(getParam('fixedabsy',curNode.title)); 
            curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10; 
            curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10; 
            curNode.fade=(getParam('fade',curNode.title)=='on')?true:false; 
            curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04; 
            curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0; 
            if (getParam('requireclick',curNode.title)=='on') { 
                curNode.requireclick=true; 
                document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false); 
                document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false); 
            } 
            else {// Note : if requireclick is on the stop clicks are ignored                
               if (getParam('doubleclickstop',curNode.title)!='off') { 
                   document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false); 
               }     
               if (getParam('singleclickstop',curNode.title)=='on') { 
                   document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false); 
               } 
           } 
            curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true; 
            curNode.title=''; 
            curNode.hasbox=1; 
       } 
       else 
          curNode.hasbox=2;    
} 
 
 
function getParam(param,list) { 
    var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]'); 
    var res = reg.exec(list); 
    var returnvar; 
    if(res) 
        return res[2].replace('[[','[').replace(']]',']'); 
    else 
        return ''; 
} 
 
function Left(elem){     
    var x=0; 
    if (elem.calcLeft) 
        return elem.calcLeft; 
    var oElem=elem; 
    while(elem){ 
         if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0)) 
             x+=parseInt(elem.currentStyle.borderLeftWidth); 
         x+=elem.offsetLeft; 
         elem=elem.offsetParent; 
      }  
    oElem.calcLeft=x; 
    return x; 
    } 
 
function Top(elem){ 
     var x=0; 
     if (elem.calcTop) 
         return elem.calcTop; 
     var oElem=elem; 
     while(elem){         
          if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0)) 
             x+=parseInt(elem.currentStyle.borderTopWidth);  
         x+=elem.offsetTop; 
             elem=elem.offsetParent; 
      }  
      oElem.calcTop=x; 
      return x; 
       
} 
 
var ah,ab; 
function applyStyles() { 
    if(ab) 
        oDv.removeChild(dvBdy); 
    if (ah) 
        oDv.removeChild(dvHdr); 
    dvHdr=document.createElement("div"); 
    dvBdy=document.createElement("div"); 
    CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle(); 
    CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle(); 
    dvHdr.innerHTML=CBE.boHDR; 
    dvBdy.innerHTML=CBE.boBDY; 
    ah=false; 
    ab=false; 
    if (CBE.boHDR!='') {         
        oDv.appendChild(dvHdr); 
        ah=true; 
    }     
    if (CBE.boBDY!=''){ 
        oDv.appendChild(dvBdy); 
        ab=true; 
    }     
} 
 
var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ; 
var ini=false; 
 
// Customised function for inner window dimension 
function SHW() { 
   if (document.body && (document.body.clientWidth !=0)) { 
      width=document.body.clientWidth; 
      height=document.body.clientHeight; 
   } 
   if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) { 
      width=document.documentElement.clientWidth;    
      height=document.documentElement.clientHeight;    
   }    
   return [width,height]; 
} 
 
 
var ID=null; 
function moveMouse(e) { 
   //boxMove=true; 
    e?evt=e:evt=event; 
     
    CSE=evt.target?evt.target:evt.srcElement; 
     
    if (!CSE.hasbox) { 
       // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement 
       iElem=CSE; 
       while ((iElem.parentNode) && (!iElem.hasbox)) { 
          scanBO(iElem); 
          iElem=iElem.parentNode; 
       }        
    } 
     
    if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){         
       if (!CSE.boxItem) { 
            iterElem=CSE; 
            while ((iterElem.hasbox==2)&&(iterElem.parentNode)) 
                    iterElem=iterElem.parentNode;  
            CSE.boxItem=iterElem; 
            } 
        iterElem=CSE.boxItem; 
        if (CSE.boxItem&&(CSE.boxItem.hasbox==1))  { 
            LBE=CBE; 
            CBE=iterElem; 
            if (CBE!=LBE) { 
                applyStyles(); 
                if (!CBE.requireclick) 
                    if (CBE.fade) { 
                        if (ID!=null) 
                            clearTimeout(ID); 
                        ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay); 
                    } 
                    else { 
                        if (ID!=null) 
                            clearTimeout(ID); 
                        COL=1; 
                        ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);                         
                    } 
                if (CBE.IEbugfix) {hideSelects();}  
                fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX; 
                fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;             
                lockX=0; 
                lockY=0; 
                boxMove=true; 
                ox=CBE.offX?CBE.offX:10; 
                oy=CBE.offY?CBE.offY:10; 
            } 
        } 
        else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove))    { 
            // The conditional here fixes flickering between tables cells. 
            if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {                
               CBE=null; 
               if (ID!=null) 
                      clearTimeout(ID); 
               fadeOut(); 
               showSelects(); 
            } 
        } 
        LSE=CSE; 
    }  
   

[cmarrero]

ESTA ES LA SEGUNDA PARTE

Código PHP:

  else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) { 
        totalScrollLeft=0; 
        totalScrollTop=0; 
         
        iterElem=CSE; 
        while(iterElem) { 
            if(!isNaN(parseInt(iterElem.scrollTop))) 
                totalScrollTop+=parseInt(iterElem.scrollTop); 
            if(!isNaN(parseInt(iterElem.scrollLeft))) 
                totalScrollLeft+=parseInt(iterElem.scrollLeft); 
            iterElem=iterElem.parentNode;             
        } 
        if (CBE!=null) { 
            boxLeft=Left(CBE)-totalScrollLeft; 
            boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft; 
            boxTop=Top(CBE)-totalScrollTop; 
            boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop; 
            doCheck(); 
        } 
    } 
     
    if (boxMove&&CBE) { 
        // This added to alleviate bug in IE6 w.r.t DOCTYPE 
        bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop; 
        bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft; 
        mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft; 
        mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop; 
        if ((CBE)&&(CBE.windowLock)) { 
            mouseY < -oy?lockY=-mouseY-oy:lockY=0; 
            mouseX < -ox?lockX=-mouseX-ox:lockX=0; 
            mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY; 
            mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;             
        } 
        oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px"; 
        oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";         
         
    } 
} 
 
function doCheck() {     
    if (   (mouseX < boxLeft)    ||     (mouseX >boxRight)     || (mouseY < boxTop) || (mouseY > boxBottom)) { 
        if (!CBE.requireclick) 
            fadeOut(); 
        if (CBE.IEbugfix) {showSelects();} 
        CBE=null; 
    } 
} 
 
function pauseBox(e) { 
   e?evt=e:evt=event; 
    boxMove=false; 
    evt.cancelBubble=true; 
} 
 
function showHideBox(e) { 
    oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden'; 
} 
 
function hideBox(e) { 
    oDv.style.visibility='hidden'; 
} 
 
var COL=0; 
var stopfade=false; 
function fadeIn(fs) { 
        ID=null; 
        COL=0; 
        oDv.style.visibility='visible'; 
        fadeIn2(fs); 
} 
 
function fadeIn2(fs) { 
        COL=COL+fs; 
        COL=(COL>1)?1:COL; 
        oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')'; 
        oDv.style.opacity=COL; 
        if (COL<1) 
         setTimeout("fadeIn2("+fs+")",20);         
} 
 
 
function fadeOut() { 
    oDv.style.visibility='hidden'; 
     
} 
 
function isChild(s,d) { 
    while(s) { 
        if (s==d)  
            return true; 
        s=s.parentNode; 
    } 
    return false; 
} 
 
var cSrc; 
function checkMove(e) { 
    e?evt=e:evt=event; 
    cSrc=evt.target?evt.target:evt.srcElement; 
    if ((!boxMove)&&(!isChild(cSrc,oDv))) { 
        fadeOut(); 
        if (CBE&&CBE.IEbugfix) {showSelects();} 
        boxMove=true; 
        CBE=null; 
    } 
} 
 
function showSelects(){ 
   var elements = document.getElementsByTagName("select"); 
   for (i=0;i< elements.length;i++){ 
      elements[i].style.visibility='visible'; 
   } 
} 
 
function hideSelects(){ 
   var elements = document.getElementsByTagName("select"); 
   for (i=0;i< elements.length;i++){ 
   elements[i].style.visibility='hidden'; 
   } 
}  
   

y en una rchivo php de consulta pongo... asi

Código PHP:

 <table class="registros" width="534" style="border:1px solid #C8BA92;border-collapse:collapse"> 
<?    echo "\n<tr> 
            <td>Empresa</td> 
            <td>Nombre</td> 
            <td>CUIT</td> 
            <td>Telefono</td> 
            <td>E-mail</td> 
            <td>Ver..</td> 
            </tr> 
            \n"; 
    $c=0; 
        while($row = mysql_fetch_assoc($query)){ 
        if($c==0){ 
        $bgcolor="cccccc"; 
        $colorback="0099cc"; 
        $c=1; 
        }else{ 
        $bgcolor="f4f4f4"; 
        $colorback="0099cc"; 
        $c=0; 
        } 
            echo "\t\t"; ?> 
            [COLOR="Red"]<tr bgcolor="#<? echo $bgcolor; ?>" onMouseOver="this.style.background = '#<? echo $colorback; ?>';"  onmouseout="this.style.background = '#<? echo $bgcolor; ?>';" title="cssbody=[dvbdy1] cssheader=[dvhdr1] header=[<? echo $row['empresa']; ?>] body=[<? echo $row['razon']; [/COLOR]?><br><? echo $row['cuit']; ?>]"> 
            <? echo " 
            <td>".$row['empresa']."</td> 
            <td>".$row['razon']."</td> 
            <td>".$row['cuit']."</td> 
            <td>".$row['telefono']."</td> 
            <td>".$row['email']."</td> 
            <td align=center ><a href=vercompleto.php?&id=".$row['id'].">Ver Datos</a></td> 
            </tr>\n"; 
               
        } 
    echo "\t";?></table><? echo "\n"; 
    $p->show(); 
} 
 
?> 
      </div> 
</div> 
<script src="../archivo_js.js"></script> 
</body>  

Pero no es exactamente lo que quiero, ya que no me parece muy eficiente...

Espero algun ejemplo que me tires usando ajax...

Muchas Gracias

[the_web_saint]

Archivo que despliega los nombres de los registros, para cuando se pase encima con el mouse se muestren los demás datos.

Código PHP:

  <?php 
session_start();
include('conect.php');
$link=Conectarse();?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B&uacute;squeda</title>
<style media="screen">
.hint {
      background-color: #EEE;
      font-family: verdana,arial,helvetica;
      visibility: hidden;
      font-size: 8pt;
      position: absolute;
      padding: 0px;
      border: 1px solid #000000;
      color: #333;
      width: 250px;
      text-align:center;
      z-index:100;
      overflow:hidden;
     }
</style>
<script type="text/javascript" src="tooltip.js"></script>
</head>

<body>
<div id="posicion" class="hint"></div><!-- Tooltip--> 
<?php
function cambiaf_a_mysql ($fecha){
    ereg( "([0-9]{1,2})-([0-9]{1,2})-([0-9]{4})", $fecha, $mifecha); 
    $lafecha=$mifecha[3]."-".$mifecha[2]."-".$mifecha[1]; 
    return $lafecha;     
} 
$desde=$_POST['desde'];
$hasta=$_POST['hasta'];
$id_Producto=$_POST['tblproducto'];
$desde=cambiaf_a_mysql($desde);
$hasta=cambiaf_a_mysql($hasta);
/*Consulta 
$consulta="select Cantidad, fecha, id_Producto from tblproducciones where fecha BETWEEN '".$desde."' and '".$hasta."' and id_Producto=".$id_Producto;*/


$consulta="select id_Producto, Nombre from tblproducto";
$resCons=mysql_query($consulta);
echo"<h2>Empresas Resultantes:</h2>";
$total=0;
while($row=mysql_fetch_array($resCons))
{?>
    <div class="datos" onMouseOver="mOvr(this,'#EBEDEF'); initMovimiento(event); enviarDatos('posicion', 'datos.php', '<?php echo $row['id_Producto'];?>');" onMouseOut="mOvr(this,'#FFFFFF'); cancelar();">
    <?php
    echo"<b>Empresa</b>: ".$row['Nombre']."<br>";?>
    </div>
    <br />
<?php 
}


?>
</body>
</html>  

Archivo js del tooltip y envio de datos por ajax

Código PHP:

  function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
          }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}//Funcion Desarrollada por Jesus Liñán [email protected] ribosomatic.com

//************************************************para la insercion de registros*************************************************
function enviarDatos(divResul, destino, id)
{    
        //donde se mostrará lo resultados
        divResultado = document.getElementById(divResul);
        divResultado.innerHTML="<center>Cargando ...</center>";
        cadenaFormulario='id='+encodeURI(id);
        //instanciamos el objetoAjax
        ajax=objetoAjax();
        //uso del medotod POST
        //archivo que realizará la operacion
        //registro.php
        ajax.open("POST", destino, true);
        ajax.onreadystatechange=function() {
            if (ajax.readyState==4) {
                //mostrar resultados en esta capa
                divResultado.innerHTML = ajax.responseText;
            }
            else
            {
                divResultado.innerHTML="<center>Cargando ...</center>";
            }
        }
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //enviando los valores
        ajax.send(cadenaFormulario);
}

//***************************************************************************************************************
function Browser() {
this.isIE = false; // Internet Explorer
this.isNS = false; // Netscape
this.isOpera = false; // Opera
if (navigator.userAgent.indexOf("Netscape6/") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("Gecko") >= 0) {
this.isNS = true;
return;
}
if (navigator.userAgent.indexOf("MSIE") >=0 && navigator.userAgent.indexOf("Opera") <0) {
this.isIE = true;
return;
}
if (navigator.userAgent.indexOf("Opera") >=0) {
this.isOpera = true;
return;
}
}

var browser = new Browser();

function initMovimiento(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onmousemove", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", getposicion, true);
event.preventDefault();
}
}
function initPulsar(event){
cancelar();
if (browser.isIE || browser.isOpera) {
document.attachEvent("onclick", getposicion);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("click", getposicion, true);
event.preventDefault();
}
}
function getposicion(event){
if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
if (browser.isOpera) {
x = window.event.clientX + document.documentElement.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop;
} 
document.getElementById("posicion").style.visibility = "visible";
document.getElementById("posicion").style.left= (x - 55) +"px";
document.getElementById("posicion").style.top = y + 20 +"px";
//document.getElementById("posicion").innerHTML = "Arrastre para ordenar sus ";
}

function cancelar() {
if (browser.isIE || browser.isOpera) {
document.detachEvent("onmousemove", getposicion);
document.detachEvent("onclick", getposicion);
}
if (browser.isNS ) {
document.removeEventListener("mousemove", getposicion, true);
document.removeEventListener("click", getposicion, true);
}
document.getElementById("posicion").style.visibility= "hidden";
}
//para cambiar el color de fondod de la tabla
function mOvr(obj, color)
{
    obj.style.background=color;
}  
   

Archivo que hace la consulta de los demas datos segun el id, que se envia por ajax, devuelve los datos al div del tooltip

Código PHP:

  <?php
include('conect.php');
$link=Conectarse();
//variables POST
$id=$_POST['id'];

$sql="select * from tblproducto where id_Producto=".$id;
$resCons=mysql_query($sql);
$row=mysql_fetch_array($resCons);
echo "Cantidad: ".$row['cantidad']."<br>fecha: ".$row['fecha'];
?>   

espero te funcione amig@, a mi me funciono a la perfección.

Saludos

[the_web_saint]

Pues hombre!, te ha funcionado esto o no?
estoy esperando respuestas!

Perdonen por colocar un nuevo mensaje, pero si edito no lo muestra como actualizado.

Saludos

[cmarrero]

Perdon perdon por no responder... he estado con millones de cosas....

Con respecto a si me funciono... pues si.. y MUCHISIMAS GRACIAS.... solo tube que modificar algunas cositas para que me funcione como yo queria pero todo mas que bien....

Te agradesco el aporte...

Cualquier duda que me surja miestras lo aplico a mis consultas te posteo un mensaje con la misma...gracias

Saludos Claudio