title: How to make HTML+CSS tooltip appear on top (avoid clip)?
body: <p>I am trying to create a simple tooltip using just HTML+CSS. Here is what I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt;some text&lt;/span&gt;
      &lt;span id="tooltip"&gt;some (1) longer (2) text (3)...&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      position: relative;
      background-color: lightgreen;
  }
  
  span#tooltip {
      display: none;
      position: absolute;
      left: -10em;
      background-color: yellow;
      z-index: 1000;
  }
  
  div:hover span#tooltip {
      display: block;
  }
  </code></pre>
  
  <p>Unfortunately, the tooltip gets clipped. How to make it appear on top of everything?</p>
  
  <p><a href="http://jsfiddle.net/z9seu/" rel="nofollow">http://jsfiddle.net/z9seu/</a></p>
  
  <p>It gets clipped in this jsfiddle, in my case that is in a table in a div whatever, and gets clipped also.</p>
  
  <p>Thanks!</p>