title: CSS Tooltip hovering position issue
body: <p>I have a straight-up CSS hover, however, I am encountering 2 problems:</p>
  
  <p>1) It is hovering too far to the right when it should be appearing just above the thumbnail (centered up)<br>
  2) It is hovering in the same place, no matter which thumbnail- it should be relative to the thumbnail position so it hovers directly above it in the center</p>
  
  <p>I've tried several times and it just won't budge.
  Originally I had it wrapped in a ... however that can't be possible because the tooltip on-hover requires a text link in it.. the good old, 'you can't have an a within an a' issue. Therefore I have used .</p>
  
  <p>What must change in CSS (preferrably) or in HTML to make this function as highlighted in those 2 points above?</p>
  
  <p><strong>Code</strong>  </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  a:link,
  a:visited {
  position:relative;
  text-decoration:none;
  }
  
  a .tooltip img {
  border:none;
  }
  
  .tooltip {
  width:100px;
  position:absolute;
  bottom:100%;
  margin:0 0 7px 0;
  padding:15px;
  font-weight:normal;
  font-style:normal;
  text-align:CENTER;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,0.3);
  line-height:1.5;
  border:solid 1px;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  -moz-box-shadow:
  0 1px 2px rgba(0,0,0,0.3),
  0 1px 2px rgba(255,255,255,0.5) inset;
  -webkit-box-shadow:
  0 1px 2px rgba(0,0,0,0.3),
  0 1px 2px rgba(255,255,255,0.5) inset;
  box-shadow:
  0 1px 2px rgba(0,0,0,0.3),
  0 1px 2px rgba(255,255,255,0.5) inset;
  cursor:default;
  display:block;
  visibility:hidden;
  opacity:0;
  z-index:999;
  -moz-transition:all 0.4s linear;
  -webkit-transition:all 0.4s linear;
  -o-transition:all 0.4s linear;
  transition:all 0.4s linear;
  }
  
  .tooltip:before,
  .tooltip:after {
  width:0;
  height:0;
  position:absolute;
  bottom:0;
  margin:0 0 -20px -10px;
  border:solid 10px;
  border-color:transparent;
  display:table-cell;
  content:"";
  }
  
  .tooltip:before {
  margin:0 0 -24px -12px;
  border:solid 12px;
  border-color:transparent;
  z-index:-1;
  }
  
  /* hover */
  
  span.tooltipwrapper:hover .tooltip {
  text-decoration:none;
  visibility:visible;
  opacity:1;
  -moz-transition:all 0.2s linear;
  -webkit-transition:all 0.2s linear;
  -o-transition:all 0.2s linear;
  transition:all 0.2s linear;
  }
  
  
  
  /* POSITIONS */
  
  /* LEFT */
  
  .tooltip,
  .tooltip.left {
  left:0;
  right:0;
  }
  
  .tooltip:before,
  .tooltip:after,
  .tooltip.left:before,
  .tooltip.left:after {
  left:40px;
  right:auto;
  }
  
  
  /* CENTER */
  
  .tooltip.center {
  left:50%;
  right:auto;
  margin-left:-65px;
  }
  
  .tooltip.center:before,
  .tooltip.center:after {
  left:50%;
  right:auto;
  }
  
  
  /* RIGHT */
  
  .tooltip.right {
  left:auto;
  right:0;
  }
  
  .tooltip.right:before,
  .tooltip.right:after {
  left:auto;
  right:40px;
  }
  
  .tooltip.right:before {
  margin-right:-2px;
  }
  
  
  /* SPEECH BUBBLE */
  
  .speechbubble {
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  margin:0 0 12px 0;
  cursor:text;
  display:block;
  visibility:visible;
  opacity:1;
  }
  
  
  /* COLORS */
  
  /* APPLE GREEN */
  
  .tooltip.applegreen {
  color:#445400;
  background:#8DB600;
  background:-moz-linear-gradient(top,rgba(141,182,0,0.8),rgba(141,182,0,1));
  background:-webkit-gradient(linear,left top,left bottom,from(rgba(141,182,0,0.8)),to(rgba(141,182,0,1)));
  border-color:#7C9902;
  }
  
  .tooltip.applegreen:before {
  border-top-color:#7C9902;
  }
  
  .tooltip.applegreen:after {
  border-top-color:#8DB600;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  rollover images for larger view&lt;br /&gt;
  &lt;span class="tooltipwrapper"&gt;
  &lt;img src="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg" alt="" width="20" height="20" /&gt;
  &lt;span class="tooltip center applegreen"&gt;
  &lt;img src="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg" alt="" width="80" height="80" /&gt;O RLY?&lt;br/&gt;&lt;a href="http://i3.kym-cdn.com/entries/icons/original/000/000/015/orly.jpg"&gt;Link to image&lt;/a&gt;
  &lt;/span&gt;
  &lt;/span&gt; 
  &lt;span class="tooltipwrapper"&gt;
  &lt;img src="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg" alt="" width="20" height="20" /&gt;
  &lt;span class="tooltip center applegreen"&gt;
  &lt;img src="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg" alt="" width="80" height="80" /&gt;NO WAI!!!&lt;br/&gt;&lt;a href="http://thumbs.myopera.com/sz/colx/drlaunch/albums/37656/no-wai001.jpg"&gt;Link to image&lt;/a&gt;
  &lt;/span&gt;
  &lt;/span&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>