title: Issues with tooltip's position with several elements
body: <p>I try to create tooltips for images on my site, and I have the following problem. The images are set with <em>float:left</em>, 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?</p>
  
  <p><img src="https://i.stack.imgur.com/svdJw.png" alt="enter image description here"></p>
  
  <p>My css-code:</p>
  
  <pre><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;}
  </code></pre>
  
  <p>HTML-code:</p>
  
  <pre><code>&lt;a class="friend" href="profile.php?id=32"&gt;
     &lt;img class="friend_img" src="member.png"&gt;
     &lt;span&gt;FIRST NAME LAST NAME&lt;/span&gt;
  &lt;/a&gt;
  </code></pre>