Question

I am using vTip plugin to display titles on hover , here is my example code:

http://jsfiddle.net/bnjSs/

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.

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

UPDATE:
http://jsfiddle.net/bnjSs/2/
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 :

$("#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( '<p id="vtip"><img id="vtipArrow" />' + title + '</p>' );

        $('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;
 });

Thanks for any help.

Answer 1

IDs should be unique.^finished
I’ve modified your current code to get it work under the current conditions. The function logic should be obvious because of the descriptive names. Fiddle: http://jsfiddle.net/bnjSs/7/

Update: Added show/hide text + feature to the code, as requested at the comments.
Update2: Taken care of whole code, improved efficiency.

You’re overusing this. this.xOffset = 5 attaches xOffset to the element. Use var xOffset = 5 to define xOffset in the scope of the function. The code below has the following scope model:

$(document).ready(function(){
   // Variables defined using `var` can be read by
   //   any function defined within this function
   function vtip(){
      // variables declared here can be read by any function defined inside vtip
      // but cannot be read by methods outside vtip
      function(){..} at .hover and .mousemove
         // These functions also have an own scope, and variables defined using
         // var cannot be read by anything outside these functions, even at vtip
   $("#showTitles").click(function(e){
      // variables declared here cannot be read by code outside this function
      // This function can read any variable which is declared using var at
      // $(document).ready

Note: “Declare” means “Define using var“.

Final code:

// Run when the DOM is ready
//Note: $(function(){ is short for  $(document).ready(function(){
$(function(){
    var xOffset = 5; // x distance from mouse
    var yOffset = 10; // y distance from mouse
    var frozen_vtip = false; //Define it
    var vtip = function() {    

        $(".displaytip").unbind().hover(    
            function(e) {
                if(frozen_vtip) return;
                this.t = this.title;
                this.title = '';
                var top = (e.pageY + yOffset);
                var left = (e.pageX + xOffset);

                $('<p class="vtip"><img class="vtipArrow" src=""/>' + this.t + '</p>').css("top", top+"px").css("left", left+"px").fadeIn("slow").appendTo(this);

            },
            function() {
                if(frozen_vtip) return;
                this.title = this.t;
                $("p.vtip", this).fadeOut("slow").remove();
            }
        ).mousemove(
            function(e) {
                if(frozen_vtip) return;
                var top = (e.pageY + yOffset);
                var left = (e.pageX + xOffset);

                $("p.vtip", this).css("top", top+"px").css("left", left+"px");
            }
        );  
    };
    vtip();


// Second function, when text is "Hide titles" it should
// prevent runing vtip() on mouseover (above function) and
// when text is  "Show titles" It should normally run vtip()
// (mouseover display title.

    $("#showTitles").click(function(e){
        e.preventDefault();
        if($(this).text() == "Hide titles"){
            $(this).text("Show titles");
            $('p.vtip').fadeOut("slow").remove();
            $('.displaytip').each(function(){
                this.title = this.t; //Re-attach `title`
            });
            frozen_vtip = false;
        } else {
            frozen_vtip = true;
            $(this).text("Hide titles");
            $('.displaytip').each(function(index) {
                if($('p.vtip', this).length) {return;}
                this.t = this.title;
                this.title = '';   
                var $this = $(this);
                var offset = $this.offset();
                var height = $this.height();
                var top = offset.top + height;
                var left = offset.left + height;
                $('<p class="vtip"><img class="vtipArrow" src="images/vtip_arrow.png" />' + this.t + '</p>' ).appendTo(this).css("top", top+"px").css("left", left+"px").fadeIn("slow");
            });
        }
    });
});