Moving jQuery function from document ready to click event

Question

I have a tabbed layout that shows/hides sections when a tab is clicked. I also have a tooltip function that currently loads a tooltip on an image map when the page is first loaded. I'd like to change this so that the tooltip only show when tab with an ID of 2 is clicked (#section2) or when that tab is active (in the case of linking to url?tab=2). I'm stumbling on it though. Here is my code:

Tab click event (this shows hides sections based on tab clicks or if you append ?tab=X to the URL:

    jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section
});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

What I would like to do is figure out how to integrate the following tool tip code so when when tab 2 is clicked it triggers the tooltip:

$("area[title='TITLE NAME']").addClass("active"); //adds active class to specified area

// Create the tooltips only when document ready
$(document).ready(function()
{

       $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {
            name: 'dark', 
            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
               color: '#fdcf81'
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); // Hide after a minute
      }
   }
});   
});
$("area").removeAttr("title");

Here is the HTML for the tabs:

 <ul class="tablinks">
        <li id="tab1" class="active"><a class="tablink" href="#section1">One</a></li>
        <li id="tab2"><a class="tablink" href="#section2">Two</a></li>
  </ul>

As you can see, this is currently triggered at document ready. Any advice would be appropriated. My jQuery is sadly sub-par at this point as I feel like this should be quite easy.

Thanks!

Answer 1

OK, I found a partial solution. Just nested the tooltip function within the tab click event:

jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
               $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {

            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); 
      }
   }
});   
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section



});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}