title: Jquery UI Tooltip moves out of parent div
body: <p>I have a jQuery tooltip as given in the following link:</p>
  
  <p><a href="http://jsfiddle.net/ronnykroy/amYZW/2/" rel="noreferrer">http://jsfiddle.net/ronnykroy/amYZW/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="parent"&gt;
    &lt;div id="child" title="It has been a very long text"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#parent{
    position:absolute;
    width: 500px;
    height: 200px;
    background-color:#00f;
  }
  
  #child{
    position:absolute;
    left:400px;
    width: 100px;
    height:150px;
    background-color: #f00;
  }
  .tooltipclass{
    width: 50px;
    background-color: #ffffff;
    color: #000000;
  }
  </code></pre>
  
  <p>With Jquery as follows:</p>
  
  <pre><code>$("#child").tooltip({
    track: true,
    tooltipClass: "tooltipclass"
  });
  </code></pre>
  
  <p>Now when i hover over 'child' i don't want the tooltip to move outside parent i.e the tooltip should be confined within the 'parent' dynamically.</p>