title: show Jquery tooltip onclick of textbox insted of mousehover
body: <p>I am using Jquery tooltip.<br>
  How can i display tooltip onclick of textbox insted of mouseover.
  what css have use to display tooltip arrow at center(for second textbox) for second textbox its moving down. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;br/&gt;&lt;br/&gt;
  &lt;input id="ag22" title="We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes.We ask for your age only for statistical purposes." /&gt;
  
  &lt;br/&gt;&lt;br/&gt;
  &lt;input id="ag22" title="We ask for your age only for statistical purposes." /&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).tooltip({
      position: {
          my: "left center",
          at: "right center",
          using: function (position, feedback) {
              $(this).css(position);
              $("&lt;div&gt;")
                  .addClass("arrow")
                  .addClass(feedback.vertical)
                  .addClass(feedback.horizontal)
                  .appendTo(this);
          }
      }
  });
  </code></pre>
  
  <p>Here is the link i have tried:
  <a href="http://fiddle.jshell.net/b7SCN/" rel="nofollow">http://fiddle.jshell.net/b7SCN/</a></p>