vtip jQuery to display titles
<p>I am using vTip plugin to display titles on hover , here is my example code:</p>

<p><a href="http://jsfiddle.net/bnjSs/" rel="nofollow">http://jsfiddle.net/bnjSs/</a></p>

<p>I have a Div#showTitles , When i click on it I wants to toggle display of all div.vtips titles on page just like mouseover.  </p>

<pre><code>$("#showTitles").click(function(){
  // this I am not sure how to acheive.  
  return false;
});
</code></pre>

<p><strong>UPDATE:</strong>
<a href="http://jsfiddle.net/bnjSs/2/" rel="nofollow">http://jsfiddle.net/bnjSs/2/</a>
I have tried this but its not showing on correct positions as mouseover but once i mouseover on .vtip and then i click on #showTitles its working fine, I also need to toggle this behavior :</p>

<pre><code>$("#showTitles").click(function(e,ui){

this.xOffset = 5; 
this.yOffset = 10; 
this.top = (e.pageY + yOffset); 
this.left = (e.pageX + xOffset);

  $('.vtip').each(function(index) {
    title = $(this).text();
    $('body').append( '&lt;p id="vtip"&gt;&lt;img id="vtipArrow" /&gt;' + title + '&lt;/p&gt;' );

        $('p#vtip #vtipArrow').attr("src", 'images/vtip_arrow.png');
        $('p#vtip').css("top", this.top+"px").css("left",  
   this.left+"px").fadeIn("slow");

 });
   return false;
 });
</code></pre>

<p>Thanks for any help. </p>
