My custom tooltip isn't moving along with the corresponding element that I hover over?

Question

My custom tooltip isn't moving along with the corresponding element that I hover over. Instead it is fixed to one location on the page. The content of the tooltip is correct for the corresponding element but its location is just static. Please can someone advise?

PHP:

 $arrayAuthors = explode(',', $authorString);
for($i=0; $i<count($arrayAuthors); $i++){
    $authors .= '<div id="author_'.$i.'" class="authorWrap" onmouseover="pub.showInvite(\'wraptip_'.$i.'\')" onmouseout="pub.unshowInvite(\'wraptip_'.$i.'\')">'.$arrayAuthors[$i].'</div>

                 <div id="wraptip_'.$i.'" class="outerWrap">
                    <div class="innerWarap">
                        <p class="personAuth">Invite '.$arrayAuthors[$i].' to club</p>
                        <p><button class="inviteBtn">Invite</button></p>
                    </div>
                 </div>
    ';
}

My CSS:

 .authorWrap{
 position: relative;
float: left;
margin-right: 20px;
padding-left: 10px;
padding-right: 10px;
background-color: #F0F0F0;
font-size: 13px;
margin: 10px;
 }

 .outerWrap{
display: none;
width: 100px;
padding: 5px;
color: #fff;    
background: #535663;
text-decoration: none;
font-size: 11px;
position: absolute;
border-radius: 6px;
top: 20px;
left: -10px;
 }

MY JS:

 pub.showInvite =function(idOfDiv){
var divInvite = document.getElementById(idOfDiv);
divInvite.style.display = 'block';
 }

 // UNSHOW INVITE - ONMOUSEOUT
 pub.unshowInvite = function(idOfDiv){
 var divInvite = document.getElementById(idOfDiv);
 divInvite.style.display = 'none';
 } 

Answer 1

It is very simple thing ;) You must change position: absolute; - that is why your tooltip is always on the same place - use position: relative; or something instead.

But if it causes problems with positioning other elements there are several ways to protect your layout from breaking.

I think the simplest will be to place tooltip inside coresponding element and than you will be able to stick with position: absolute; (but parent element can't be postion: static; ).

Also, with JavaScript, you can get position from parent element and appear it (possibly with some calculations) to your tooltip - but this is much more complicated way.