PHP & Jquery - open a small div over others div when mouse go on a link

i need to open a div (or somethings other, dunno what) when mouse go on a link. But this div doesnt move other div. It must open OVER the others div (like this website...when there are the "popup/error" div over others div. How can do it? Transparent? Or somethings l开发者_运维技巧ike it?

for example, if i write somethings into title field in a link statement, there is a small windows that show to me what i wrote. somethings like it, but with a div, or somethings other when i can put text, image, ecc.

as another example, on facebook when i go on the main wall and i go with mouse on the name of the users, it show me a small windows with more details. the same when i open the chat box :)

code :

<div class="playerDetailsOff">
    Name : Marco<br />
    Surname : Daghine
</div>

<a class="viewt" href="#" onmouseover="viewPlayerOn('id1?>');return false" onmouseout="viewPlayerOff();return false">link 1</a>
<a class="viewt" href="#" onmouseover="viewPlayerOn('id2?>');return false" onmouseout="viewPlayerOff();return false">link 2</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id3?>');return false" onmouseout="viewPlayerOff();return false">link 3</a>    
<a class="viewt" href="#" onmouseover="viewPlayerOn('id4?>');return false" onmouseout="viewPlayerOff();return false">link 4</a>

function viewPlayerOn(val) {
    $('.playerDetailsOff').removeClass().addClass('playerDetailsOn');
}

function viewPlayerOff() {
    $('.playerDetailsOn').removeClass().addClass('playerDetailsOff');
}    

.playerDetailsOn{width:200px; height:100px; position:fixed;}
.playerDetailsOff{display:none;}

Basically what you want is an overlay or a lightbox (both terms are easy to google). Just as Felix Kling pointed out you will want absolute positioning - or you can look at z-index (highest z-index is on top).

Just to make it easy on you there was a similar question with example code which should definitely get you started: jQuery - How Do I Place a DIV On Overlay?

You want overLIB. Check out their homepage to see features and documentation.

Regards, Alin

You can use this one: http://www.leigeber.com/2008/06/javascript-tooltip/. It is a lightweight javascript if you don't want to use JQuery.