title: jQuery tools tooltip, position with absolute & margin
body: <p>I'm using the jquery plugin: <a href="http://flowplayer.org/tools/tooltip/index.html" rel="nofollow noreferrer">Tools.tooltip()</a> Seems like the positioning is really a problem.</p>
  
  <p>When the tooltip is wrapped in some container with position:absolute, you'll need to add <code>relative:true</code> in the conf dictionary so the tooltips are positioned properly.</p>
  
  <p>Now the problem is: if you have both a <code>position:absolute</code> wrapper as well as tooltip triggers with margin, the position will be messed up</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .trigger
  {
      width:100px;
      height:40px;
      background-color:red;
      margin:5px;
      position:relative;
  }
  .tooltip 
  {
      display:none;
      color:white;
      background-color:#333;
      padding:10px;
      border-radius:3px;
  }
  &lt;/style&gt;
  &lt;div class='wrapper' style='position:absolute;left:100px;top:100px'&gt;
      &lt;div class='trigger' style='margin-top:100px;margin-left:100px'&gt;
          hover to see the tooltip
      &lt;/div&gt;
      &lt;div class='tooltip'&gt;
          The awesome tooltip
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type='text/javascript'&gt;
      $('.trigger').tooltip({
          position:'bottom center',
          relative:true,
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The tooltip is supposed to show beneath the trigger and centered in this case. But when mouse over the trigger(red box), tooltip(gray box) is showing at this position:</p>
  
  <p><img src="https://i.stack.imgur.com/ddW38.jpg" alt="enter image description here"></p>
  
  <p>As if the margin is totally ignored. Also, if I don't use margin at all(only having a wrapper of position:absolute and uses relative:true in conf), the tooltip still shows up in a strange position:</p>
  
  <p><img src="https://i.stack.imgur.com/6rq1a.png" alt="enter image description here"></p>
  
  <p>The tooltip is a little bit to the left and top comparing to the correct position, which I have no idea about.</p>
  
  <p>How may I solve this problem? Thanks a lot! :)</p>