make tooltip display on click and add a modal to it
<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>
