title: Keep qTip Tool Tip Always Visible
body: <p>I am using <a href="http://craigsworks.com/projects/qtip2/" rel="nofollow">qTip2</a> to handle some tool tips on my site. I have the following code inside a template for the pages it applies to:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="overview"&gt;&lt;a href="#"&gt;&lt;img class="border-gray" src="src.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="estimate"&gt;&lt;a href="#"&gt;&lt;img class="border-gray" src="src.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;!-- More HTML similar to above --&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
     style: {classes: 'qtip-tipsy'}
  });
  $('.estimate').qtip({
     content: 'Estimating',
     position: {
       my: 'bottom center', 
    at: 'top center'
    },
     style: {classes: 'qtip-tipsy'}
  });
  //More JS as above
  </code></pre>
  
  <p>On the individual pages I would like to have the tool tip visible if the class correlates with the page. IE: <code>site.com/overview</code> would have the tool tip with the class of <code>overview</code> always visible.  As would <code>site.com/estimate</code> have the tool tip <code>estimate</code> visible. </p>
  
  <p>I have attempted to add this code to the page but it doesn't work: </p>
  
  <pre><code>$('.overview').qtip({
     hide: false
  });
  </code></pre>
  
  <p>What I am after is when the page loads the tool tip is visible. No mouse over etc is required. The visible tool tip will depend on what page is visible. IE: <code>/overview</code> = <code>.overview</code> tool tip. </p>
  
  <p>How can I achieve this?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The following code will achieve what I am looking for: </p>
  
  <pre><code>$('.overview').qtip({
     content: 'Overview',
     position: {
       my: 'bottom center', 
       at: 'top center'
  },
    show: {
      ready: true
  },
    hide: false,
    style: {classes: 'qtip-tipsy'}
  });
  </code></pre>
  
  <p>However this portion of the code is in a template and not editable on the page level: </p>
  
  <pre><code>$('.overview').qtip({
    content: 'Overview',
    position: {
      my: 'bottom center', 
      at: 'top center'
    },
     style: {classes: 'qtip-tipsy'}
  });
  </code></pre>
  
  <p>If I try this below the above code it doesn't work: </p>
  
  <pre><code>$('.overview').qtip({
      show: { ready: true },
      hide: false
  
  }); 
  </code></pre>
  
  <p>How do I combine the two if one is not editable on the page level? IE: How would I add the <code>show</code> and <code>hide</code> code into the above code if I cannot edit the code on the page level?</p>