title: CSS ToolTip being cut off by vertical scrollbar.
body: <p>I have a simple tooltip that has the following CSS</p>
  
  <pre><code>/* tooltip for buttons */
  a.tooltip{position:relative; z-index:24;text-decoration:none}
  a.tooltip:hover{z-index:25;}
  a.tooltip span{display: none}
  a.tooltip:hover span{ /*the span will display just on :hover state*/
      display:block;
      position:absolute;
      top:1.1em; left:1.1em; width:10em;
      border:1px solid #6e7044;
      background-color:#feffe1; color:#6e7044;
      text-align: center}
  </code></pre>
  
  <p>This works properly for me in the normal case.</p>
  
  <p>But if I have a div which has a pre-defined height and <code>overflow-y:auto;</code>, i have 2 problems</p>
  
  <ol>
  <li>the tooltip gets cut off. ( goes under the divs scrollbar)</li>
  <li>there happens an unwanted overflow-x to accomadate the span that has tool tip.</li>
  </ol>
  
  <p>Example fiddle: <a href="http://jsfiddle.net/naveen/2ur3Q/" rel="nofollow">http://jsfiddle.net/naveen/2ur3Q/</a>  </p>
  
  <p>How could I correct this?</p>