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>