title: Positioning jquery ui tooltip
body: <p>I have a select box and when selects an option it should display the tooltip correctly and it should be at the right of the select box , how to position like this ,and its now overlapping the tooltips ,how to avoid this and display one by one ? thanks .<br>
  <strong>Html :</strong> </p>
  
  <pre><code>&lt;div class="form_block2" &gt;
      Plan&lt;SPAN style="color:#ff0000;"&gt;*&lt;/SPAN&gt;:&lt;br/&gt;
      &lt;select class="input_txt_block1" title="Select one" id="plan" name="plan"&gt;
          &lt;option selected="selected"&gt; ------- Select PLan ------- &lt;/option&gt;
          &lt;option title="three dynamic pages" value="1"&gt;Gold&lt;/option&gt;
          &lt;option title="two dynamic pages" value="2"&gt;Silver&lt;/option&gt;
          &lt;option title="one dynamic pages" value="3"&gt;Bronze&lt;/option&gt;                               
          &lt;option title="single page website" value="5"&gt;Basic&lt;/option&gt; 
          &lt;option title="Basic information" value="4"&gt;Listing&lt;/option&gt;
      &lt;/select&gt;&lt;span style="color:blue;" id="message"&gt;&lt;/span&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>Jquery:</strong>   </p>
  
  <pre><code>$("#plan option").tooltip({
      position: {
          my: 500,
          at: 500
      }
  });
  </code></pre>
  
  <p><strong>EDIT :</strong> when i removing the position attribute ,its coming one by one but not positioning correctly.  </p>
  
  <p>here is the fiddle : <strong><a href="http://jsfiddle.net/cakesandwich/3yhv5/1/" rel="nofollow">FIDDLE</a></strong></p>