title: my tooltip is cut off by the div container
body: <p>I have this code to make appear a tooltip when a message box is "hovered". All message boxes are inside a div called chatbox.</p>
  
  <pre><code>$('.box').hover(function(){
       var htmltooltip = '&lt;div id="info" class="shadow"&gt;';
       htmltooltip += '&lt;h4&gt;Label info&lt;/h4&gt;';
       htmltooltip += '&lt;img src="images/defaultphoto.gif"/&gt;';
       htmltooltip += '&lt;/div&gt;';
       $(this).append(htmltooltip).children('#info').hide().fadeIn(400).css('left', -150);
       }, function() {
           $('#info').remove();
       }
     );
  </code></pre>
  
  <p>This is my css code to the chatbox, box and tooltip called #info</p>
  
  <pre><code>#chatbox {
  
      position: absolute;
      overflow-y:auto; 
      top:40%;
      left:50%;
      background:#fff;
      height:80%;
      width:550px;
      border:3px solid black;
      }
  .box{
      width:90%;
      height:auto;
      margin:5px 20px 0px 0px;
      border:3px solid #918750;
      float:left;
      cursor: pointer;
  }
  #info{
      position:absolute;
      display:block;
      background:#7F7777;
      width:300px;
      padding-bottom: 0.5em;
      z-index:25;
  
  
  }
  </code></pre>
  
  <p>My problem is that the tooltip is cut off by the chatbox div when pass the limits of the chatbox. 
  Here is a jsfiddle: <a href="http://jsfiddle.net/Ifalcao/k9Yrc/2/" rel="noreferrer">http://jsfiddle.net/Ifalcao/k9Yrc/2/</a></p>
  
  <p>The overflow rule in the chatbox div must exist, otherwise if I have many message boxes, they will pass the limit of the chatbox. (<a href="http://jsfiddle.net/Ifalcao/URBDE" rel="noreferrer">http://jsfiddle.net/Ifalcao/URBDE</a>) I need the message boxes inside the chatbox but the tooltips of the message boxes outside the chatbox.</p>
  
  <p>Thanks in advance.</p>