title: make tooltip display on click and add a modal to it
body: <p>strangely, I find it difficult to bind jquery's onclick event handler to this fiddle. I don't even know what I'm doing wrong. The html is as follows:-</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a id="tooltip_1" href="#" class="tooltip" &gt;Trigger1&lt;/a&gt;&lt;li&gt;
      &lt;li&gt;&lt;a id="tooltip_2" href="#" class="tooltip" &gt;Trigger2&lt;/a&gt;&lt;li&gt;
      &lt;li&gt;&lt;a id="tooltip_3" href="#" class="tooltip" &gt;Trigger3&lt;/a&gt;&lt;li&gt;
  &lt;/ul&gt;
  
  &lt;div style="display: none;"&gt;
      &lt;div id="data_tooltip_1"&gt;
          data_tooltip_1: You can hover over and interacte with me
      &lt;/div&gt;
      &lt;div id="data_tooltip_2"&gt;
          data_tooltip_2: You can hover over and interacte with me
      &lt;/div&gt;
      &lt;div id="data_tooltip_3"&gt;
          data_tooltip_3: You can hover over and interacte with me
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>styled this way:-</p>
  
  <pre><code>li { 
      padding: 20px 0px 0px 20px;
  }​
  </code></pre>
  
  <p>with a jquery like this:-</p>
  
  <pre><code>$(document).ready(function() {
      $('.tooltip[id^="tooltip_"]').each
  
          (function(){
          $(this).qtip({
              content: $('#data_' + $(this).attr('id')),
                  show: {
              },
              hide: {
                  fixed: true,
                  delay: 180
              }
          });
      });
  });​
  </code></pre>
  
  <p>you check out the fiddle page I created:- <code>http://jsfiddle.net/UyZnb/339/.</code></p>
  
  <p>Again, how do I implement a jquery modal-like appearance to it so the tooltip becomes the focus?</p>