Is my custom tooltip not moving with the corresponding element that I was hovering over?

Question

My custom tooltip does not move with the corresponding element that I was hovering over. Instead, it is tied to one place on the page. The contents of the tooltip are correct for the corresponding element, but its location is simply static. Please can anyone 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

This is a very simple thing;) You have to change position: absolute;- so your tooltip is always in one place - use position: relative;or something instead.

, .

, , position: absolute; ( postion: static;).

, JavaScript (, ) , .