title: JQueryUI Slider - Tooltip for the Current Position
body: <p>At the moment I have a slider and an small input text box which updates based on where you scroll on it.</p>
  
  <p>Here is the javascript:</p>
  
  <pre><code>$("#slider").slider({
      value: 500,
      min: 0,
      max: 1000,
      step: 50,
      slide: function(event, ui) {
          $("#budget").val(ui.value);
      },
      change: function(event, ui) {}
  });
  $("#budget").val($("#slider").slider("value"));​
  </code></pre>
  
  <p>And here is the html/css:</p>
  
  <pre><code>&lt;input type="text" id="budget" style="width:50px;text-align:center"/&gt;
  
  &lt;div id="slider"&gt;&lt;/div&gt;​
  </code></pre>
  
  <p>However it looks a bit odd having the small text box with the figure just at the top of the slider, so I would like it to update its horizontal position so it is above the handle of the slider (.ui-slider-handle) if possible - like a sort of tooltip.</p>