Issues with tooltip's position with several elements

Question

I try to create tooltips for images on my site, and I have the following problem. The images are set with float:left, and there are 3 images per row, and there are several rows. The tooltip is supposed to be on the right side from the image, and it's working fine, but only for the images on the first row. When hovering over images on the second or third row the tooltip is on the place where the tooltip is for the third image from the top. What am I doing wrong?

My css-code:

.friend_img { opacity:0.6; margin:0; width:83.333333px; float:left; }
.friend_img:hover { opacity:1.0; }

.friend span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
.friend:hover span{display:inline; position:absolute; background:#ffffff;
border:1px solid #cccccc; color:#6c6c6c;}

HTML-code:

<a class="friend" href="profile.php?id=32">
   <img class="friend_img" src="member.png">
   <span>FIRST NAME LAST NAME</span>
</a>

Answer 1

This is the modified css:

.friend_img {
    opacity:0.6;
    margin:0;
    width:83.333333px;
    float:left;
}
.friend_img:hover {
    opacity:1.0;
}  
span{
    display:none;
}
.friend:hover span{
    display: inline-block;
    z-index:100;
    width:130px;
    top:20;
    left:80px;
    position: absolute;
    background:#ffffff;
    border:1px solid #cccccc; color:#6c6c6c;
}
a.friend {
    position:relative;
    display:inline-block
}

And this is the html:

<div style="width:300px;border:1px solid black; text-align:center" >
    <div>
        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>


        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>
    </div>

    <div>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>

        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>


        <a class="friend" href="profile.php?id=32">    
            <img class="friend_img" src="icon.png">    
            <span>FIRST NAME LAST NAME</span>
        </a>
    </div>

</div>

I posted the working example here: http://jsfiddle.net/7jZQa/2/

Answer 2

To beging with, you need to set a.friend to position:relative;