title: JqueryUI tooltip on button click instead of hover to appear elsewhere
body: <p>I am using <strong><em>JQueryUI tooltip</em></strong> to display some dynamic messages to the user. Basically I want to display the tooltip on top of an input field when a user clicks a button. </p>
  
  <p>The way I have coded it works only when hovering on top of the button, and in JQueryUI examples there's no help on achieving this scenario. How do I differ from hover effect and make it work with click event of the button? How can I achieve this? </p>
  
  <p>I'm using <code>jquery-ui-1.9.0.custom.js</code> and <code>jquery-1.8.2.js</code> for this.</p>
  
  <p><strong>HTML Code:</strong>
  I want to display the message on top of this input box</p>
  
  <pre><code>&lt;input id="myInput" type="text" name="myInput" value="0" size="7" /&gt;
  </code></pre>
  
  <p>The button which I click in-order to popup tooltip  </p>
  
  <pre><code>&lt;input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" /&gt;
  </code></pre>
  
  <p><strong>JQuery Code</strong></p>
  
  <pre><code>$(document).ready(function() {
      $(".myBtn").tooltip({
                 content: function () {
                    return '&lt;span id="msg"&gt;Message&lt;/span&gt;';
                 },
                 position: {
                    my: "center bottom",
                    at: "center top"
                 }
              });
  });
  </code></pre>