title: CSS Tooltip inside scrolling div
body: <p>I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div. </p>
  
  <p>Given the example HTML:</p>
  
  <pre><code>&lt;div style="overflow:scroll; width:80px"&gt;
  &lt;a href="#" class="tooltip"&gt;
  an image
  &lt;span&gt;some hidden tooltip which is a bit longer in here&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(Note: in the real world there will be multiple things with tooltips inside the scrolling div)</p>
  
  <p>I have the CSS:</p>
  
  <pre><code>a.tooltip span 
  {
  display:none;
  position:absolute;
  padding:0px 0px 2px 2px;
  background:yellow; 
  text-decoration:none;
  vertical-align:top;
  }
  
  a.tooltip:hover span
  {
  display:inline; 
  position:absolute;
  padding:0px 0px 2px 2px;
  top:0;
  left:18px;
  background:yellow; 
  text-decoration:none;
  vertical-align:top;
  z-index:5;
  }
  
  a.tooltip 
  {
  border-width:0px; 
  text-decoration:none;
  }
  
  a.tooltip:hover
  {
  border-width:0px; 
  text-decoration:none;
  position:relative;
  }
  </code></pre>
  
  <p>Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?</p>
  
  <p>Is this achievable in CSS alone, without using javascript?</p>
  
  <p>edit: <strong><a href="http://jsfiddle.net/5mASU/" rel="nofollow noreferrer">Live Example</a></strong> kindly provided by <em>Kyle Sevenoaks</em>.</p>