title: CSS Tooltip positioning incorrect and stuck at one place
body: <p>I am trying to fix a CSS issue, there's and "i" icon image on which the hovering effect is placed. As the mouse moves over it the tool-tip should appear. But the problem is that tool-tip appears but its fixed on one place there are many "i" icons and as we hover on each due to the tool-tip being displayed in one place, hovering on some "i" images is useless as the tool-tip is not visible. These "i" images are placed in  an iframe plus there are many "i" icons so scroll-bar appears so the more bottom of the iframe we reach the tool-tip is not available. Any suggestions and help? Only pure CSS no JS, jquery...says my boss.</p>
  
  <p>The "i" image code:</p>
  
  <pre><code>    &lt;div class="sa_statusIn"&gt; Reward Earned
      &lt;span id="sa_status8"&gt;
      &lt;img class="sa_status_tooltip" src="i_image_link.png" alt="help" value="help"   width="15" height="15" border="0"&gt;&lt;br&gt;&lt;a href="v2-importer-facebook-ts.php?tab_provider=3"&gt; Claim Reward &lt;/a&gt; &lt;span id="sa_tooltiptxt"&gt;Congrats! Another Company system is up &amp;amp; running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.&lt;/span&gt;&lt;/span&gt;
      &lt;a href="#.php?tab_provider=3"&gt; Claim Reward &lt;/a&gt; &lt;span id="sa_tooltiptxt"&gt;Congrats! Another Company system is up &amp;amp; running and we have you to thank. Continue to earn rewards by sharing Company with more of your friends.&lt;/span&gt;&lt;/span&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>And here's the relevant CSS:</p>
  
  <pre><code>.sa_statusIn {
  float: left;
  width: 29%;
  padding: 16px 0 0 24px;
  color: #C25A59;
  }
  
  img.sa_status_tooltip {
  width: 19px;
  height: 18px;
  position: relative;
  top: 4px;
  left: 5;
  }
  
  img.sa_status_tooltip {
  width: 19px;
  height: 18px;
  position: relative;
  top: 4px;
  left: 5;
  }
  
  #sa_tooltiptxt {
  display: none;
  background: ffffcc;
  margin-left: 145px;
  margin-top: 0px;
  padding: 3px 0px 9px 3px;
  position: absolute;
  z-index: 1000;
  width: 115px;
  height: 10px;
  }
  </code></pre>
  
  <p>Regards.</p>