(Duda) Mostrar informacion con ventana emergente

Buenas, hoy me encuentro con la necesidad de mostrar informacion en una ventana emergente, alguien sabe como se hace?
-Esto es lo que tendria que lograr:

Creo un cuadricula de 8 x 8 (no es ajedrez) en la que se muestra el id del cuadrado (se muestran con php y base de datos) y quiero que al posar el mouse sobre cada cuadrado, salga una pequeña ventana de 100px x 50px mostrando mas datos tambien descargados de una base de datos, como podria hacerlo?

- Lo pregunto aqui porque me imagino que se haria con js aunque use php y base de datos, gracias colegas, espero su respuesta, saludos.

Acá te dejo el efecto para que aparezca la ventanita con información (Tooltip), las DB las programas tú.

Ejemplo: http://www.dynamicdrive.com/dynamicindex5/speechbubblestooltip.htm

Varias Opciones: http://www.dynamicdrive.com/dynamicindex5/

Espero te sirva. Saludos.

Muchas gracias, me sirvio uno de los del segundo link, es que necesitaba que saliera una ventana con enlaces, aunque tengo un problema, la ventana me sale abajo a la derecha y no justo al lado del objeto al que se la asigno, que opinas, se podra cambiar algo para que salga justo al lado del objeto?

este es el css que dan:

#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}

este es el js:
var floattext=new Array()
floattext[0]='- <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'
floattext[1]='Some other floatie text'

var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.

var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}

function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function paramexists(what){
return(typeof what!="undefined" && what!="")
}

function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}

function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}

y este es el objeto, en este caso dos enlaces y el div que hace de ventana con los enlaces:
<div id="dhtmlfloatie" >
</div>
<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)"<!--onMouseout="hidefloatie()"-->>Coding Forums</a> |
<a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100)">JavaScript Kit</a>

Que opinas? se podra hacer algo para que la ventana salga al lado del enlace, flotando sin mover el contenido que lo rodea? gracias.

Seguro que sí. Déjanos el enlace al script que usaste. Saludos.

Ok, es este:

http://www.dynamicdrive.com/dynamicindex5/linkfloaties.htm

Lo que sucede es que el script que elegiste ubica la ventana en una posición siempre absoluta, debes usar por ejemplo éste: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

Ubica el mouse sobre el texto "Search DD" al lado izquierdo en los menus. El otro ejemplo es presionando al lado derecho donde dice: Additional Resources

Ese tooltip aparece siempre junto al texto que quieras.

Saludos.

Muchas gracias, me resulto perfecto, saludos.

Por nada. Ya vés que no era muy complicado. Suerte y Saludos.