title: jQuery UI tooltip positioning issue
body: <p>I have a positioning issue with jQuery UI's tooltips. I would prefer to not use jQuery UI, but the project I'm working on already uses it throughout and it's been requested I try and make use of it, rather than integrating my preferred option, qTip2. </p>
  
  <p>When the tooltip appears, it causes a vertical scrollbar. I am positioning the tooltip centrally above the target and it's as I want it, excluding this issue.</p>
  
  <pre><code>$(function() {
  $( document ).tooltip({
  show: false,
      hide: false,
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function( position, feedback ) {
        $( this ).css( position );
        $( "&lt;div&gt;" )
          .addClass( "arrow" )
          .addClass( feedback.vertical )
          .addClass( feedback.horizontal )
          .appendTo( this );
      }
    }
   });
  });
  </code></pre>
  
  <p>I can see that the tooltip is being positioned at top:-600px which I assume is what is causing the scrollbar to appear. </p>
  
  <p>I've tried changing / removing the positioning of the tooltip, but it didn't have any effect. I have tried removing parts of the CSS to pinpoint the problem and it seems related to the padding (any) or height (min, max or fixed).</p>
  
  <p>Although removing padding and height fixes the issue, it obviously leaves the tooltip looking a bit ... Skinny. I would like to work out what the problem is and a way around it, so I can style the tooltip.</p>
  
  <p>My current CSS (including the height and padding which I can see causes the issue) is as follows (there are also styles set for the arrows, which I've omitted as I can see they're not causing any problems):</p>
  
  <pre><code>.ui-tooltip {
      z-index:10;
      width:150px;
      padding:10px;
      min-height:20px;
      max-width:100%;
      font-size:0.875em;
      text-align:center;
      border-radius: 20px;
      color:#707070;
      background:#fffdc2 url(../img/fade.png) repeat-x;
      font-family: 'Droid Sans', sans-serif;
      text-shadow: 1px 1px #ffffff;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border:1px solid #e1e0aa;}
  </code></pre>
  
  <p>I know jQuery UI have <a href="http://wiki.jqueryui.com/w/page/12138112/Tooltip" rel="nofollow noreferrer">an open issue about connectors</a>, so I've tested it without any positioning settings and it made no difference to this. </p>
  
  <p>I have seen <a href="https://stackoverflow.com/questions/15926561/jquery-tooltip-negative-position">this issue</a> mentioned a few times, but it wasn't relevant as I do not have qTip, or anything else included.</p>
  
  <p>I've set up a <a href="http://jsfiddle.net/MSLYw/" rel="nofollow noreferrer">JS fiddle here</a>.</p>
  
  <p>I'd appreciate any help or advice.</p>
  
  <p>Thanks!</p>