title: Show tooltip at top using jquery
body: <p>I am using this jquery tooltip to show the description for my link buttons. But this tooltip is getting displayed at the bottom and how can I display the tooltip at the top of my link button.</p>
  
  <p><a href="https://jqueryui.com/tooltip/" rel="nofollow">https://jqueryui.com/tooltip/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;script&gt;
       $(function () {
          $(document).tooltip({
      position: {
      my: "center bottom", 
      at: "center top", 
  },
  });
      });
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      label
      {
          display: inline-block;
          width: 5em;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div&gt;
      &lt;table&gt;
          &lt;li&gt;&lt;a href="#" class="pureCssMenui"&gt;Department&lt;/a&gt;
              &lt;ul class="pureCssMenum"&gt;
                  &lt;li class="pureCssMenui"&gt;&lt;a class="pureCssMenui" href="WebForm.aspx" title="Contains list of Manufacturers"&gt;
                      Manufacturer&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="pureCssMenui"&gt;&lt;a class="pureCssMenui" href="ToolTip.aspx" title="Contains list of jquery tooltip"&gt;
                      ToolTip&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>